Object validation

[s-lem]

Hello,

I'm trying validate the properties of an object through a form validation schema, but it doesn't work (see my code
below). It works fine if the validation rules are set in useField(), but not when using a form validation schema.
Do I have to use multiple useField to make it work, one for each object property? (useField("t1.id"), useField("t1.text"))
What's the best way to do this?

Thanks for your help.

Code:

// parent component (form)
<template>  
  
  <div>
    <child v-model="val" name="t1" />
  </div>

  <div>
      errors: {{ errors }} 
  </div>

</template>

<script lang="ts" setup>

import child from './child.vue'
import { useForm } from 'vee-validate'
import * as yup from 'yup'
import { ref } from 'vue' 

// should trigger a "field too long" validation error, text must be max 5 chars.
const val = ref({ id: 1, text: "abcdefghij" })

const rules = yup.object({
  t1: yup.object({ 
    id: yup.number().positive(), 
    text: yup.string().max(5) 
  }).required()
})

const { errors, values } = useForm(
  { validationSchema: rules }
)

</script>

//**********************

// child component (field)

<template>   
   <input type="text" v-model="value.id"/>
   <input type="text" v-model="value.text"/>
</template>

<script lang="ts" setup>

import { PropType, reactive } from 'vue' 
import { useField  } from 'vee-validate' 

const props = defineProps({
  name: { type: String, default: null},
  modelValue: { type: Object as PropType<object | null>, default: null },
})

const emits = defineEmits<{ 
  (event: "update:modelValue", value: object | null): void  
}>()

const { value } = useField(() => props.name, undefined, { syncVModel: true, validateOnMount: true } )

</script>