Child component is not picking up the validation rules from parent in Vue with Vuelidate

Question

I am new to Vue and trying to pass the vuelidate rules from parent to child but end up with "Cannot read properties of null (reading '$validator')" while the browser console shows its there. I am confused with what did wrong.

Parent:

<template>
  <ExampleForm :dataModel="dataModel" :rules="rules"></ExampleForm>
</template>
<script>
import ExampleForm from './components/ExampleForm.vue';
import {required} from '@vuelidate/validators'

export default {
    components: { ExampleForm },
    data(){
      return{
        dataModel:{},
        rules:{}
      }
    },

    beforeMount(){
      for(let i=0; i<5; i++){
        this.dataModel[`row${i}`] =null;
        this.rules[`row${i}`] = {required};
      }
    }
}
</script>

Child component:

<script>
import {useVuelidate} from '@vuelidate/core';

export default{
  props:{
    rules:{type:Object, default:{}},
    dataModel:{type:Object, default:{}}
  },

  setup: (props) => {
    return{
      v$: useVuelidate(props.dataModel, props.rules)
    }
  }
}
</script>

The Browser shows

I am confused that it said cannot read $validator but it is actually there