how do i validate dynamic fields in a form?

[kaleabAlemayehu]

<template>
    <Form v-slot="{ errors, values }" @submit="onSubmit">
        <div >
            <label for="title" >Title</label>
            <Field as="input" type="text" name='title' id="title" rules="required" placeholder="Title ..." />
            <ErrorMessage class="err" name="title" />
        </div>
         <div>
            <div  v-for="ing, index in values.ingredients" :key="index">
                <div>
                    <label :for="`ingredient${index}`">ingredient</label>
                    <Field as="input" type="text" :id="`ingredient${index}`" :name="`ingredients[${index}].name`" :placeholder="`ingredient ${index} ...`" rules="required" />
                    <ErrorMessage class="err" :name="`ingredients[${index}].name`" />
                </div>
                <div >
                    <label :for="`amount${index}`">amount</label>
                    <Field as="input" type="text" :id="`amount${index}`" :name="`ingredients[${index}].amount`" :placeholder="`ingredient ${index} ...`" rules="required" />
                    <ErrorMessage class="err" :name="`ingredients[${index}].amount`" />
                </div>
                <button type="button" @click="removeIngredient(index, values)">
                    <Icon name="mi:remove" />
                </button>
            </div>
            <button type="button" @click="addIngredient(values)">
                <Icon name="mi:add" />
            </button>
        </div>
      <button type="submit" >Submit</button>

    </Form>
</template>

<script>
import { reactive, ref, onMounted, defineComponent } from 'vue';
import { configure, ErrorMessage, Form, Field, defineRule } from 'vee-validate';
import { integer, required, image, size, email } from '@vee-validate/rules';
export default defineComponent({
    name: "RecipeForm",
    setup() {
        const addIngredient = (values) => {
            if (!values.ingredients) {
                values.ingredients = [{}]
            } else {
                values.ingredients = [...values.ingredients, {}];

            }
        };
        const removeIngredient = (index, values) => {
            values.ingredients = values.ingredients.filter((_, i) => i !== index);
        };
        onMounted(() => {
            configure({
                validateOnInput: true,
            });
            defineRule("required", required)
            defineRule("email", email)
            defineRule("size", size)
            defineRule("integer", integer)
            defineRule("image", image)
        })
        const onSubmit = async (value) => {
            alert(JSON.stringify(value, null, 2))
        }
   return {
            onSubmit,
            handleAddtional,
            handleFileChange,
            addIngredient,
        }
    },
    components: {
        Form,
        Field,
        ErrorMessage,
    }
});
</script>

i try to validate the ingredient and amount field like this but for some reason it says Set operation on key "ingredients" failed: target is readonly the error is on the addIngredient() method i guess and i think it violate readonly rule on reactive elements, is there any way i can solve this issue or may be I try to validate it in the wrong please someone show me the correct way, any help is appreciate! thank you!

[kaleabAlemayehu]

I think i found the solution for it in the doc. by using <FieldArray> i do achieve what i want.