<Form/> in Parent Component <Field/> in Child Component.(With CodeSandBox Link)

[Krishnasai3cks]

I'm trying to find a way to add validation to the following structure.
Parent.vue

<template>
    <Form @submit="onSubmit">
        <Child1/>
        <button>submit<button/>
    </Form>
</template>
<script setup lang="ts">
import Child1 from "./Child.vue"
function onSubmit(values){
    console.log(JSON.stringify(values))
}
</script>

Child1.vue

<template>
    <Field1 v-model="obj.prop1"/>
    <Field2 v-model="obj.prop2"/>
</template>
<script setup lang="ts">
import Child1 from "./Child.vue"
const props = defineProps(['obj'])
defineEmits(["update:obj"])
</script>

Please help me I've also tried other methods to improvise like...
<Field :modelValue="obj.prop1" and @update="(value) => setFieldValue("obj.prop1", value)" />

Edit:
CodeSandBox link https://codesandbox.io/s/angry-franklin-chm6k9?file=/src/components/HelloWorld.vue

[Krishnasai3cks]

Guys. I don't know what I had done differently. But it's somehow working now.
Peak dev moment.