How can i have reusable input component?

I’m using Typescript, Vue and Vee-Validate. I’m trying to build a reusable input component and it works with one input component. But I can’t insert more than one component. I tried a few things, but it didn’t work.

Does anyone have an idea how to customize the code for multiple components?

Here is parent component

<script lang="ts">
import { Form, useField, useForm } from 'vee-validate'
import { string } from 'yup'

export default defineComponent({
    components: {}
})
</script>

<script lang="ts" setup>

const label: string = 'First Field'
const { handleSubmit, errors } = useForm({
    validationSchema: {
        query: string().required('required.'),
    },
    initialValues: {
        query: '',
    },
})
const { value: query } = useField<string>('query')
const onSubmit = handleSubmit(async () => {
    alert('Well Done')
})
</script>
<template>
    <main class="min-h-screen">
        <div class="base-container">
        Content
        </div>
        <Form @submit.prevent>
            <ChildComponent v-model="query" :label="label" placeholder="Yo" :error="errors.query" />
            <button class="bg-red-500 text-white text-sm px-4 py-2 mt-10 rounded-lg"
              type="submit" 
              @click="onSubmit"
            >
            Submit
            </button>
        </Form>
    </main>
</template>