Vue 3: Form Validation Not Triggering on Dynamic Form Fields with VeeValidate
I can't seem to get Could someone explain I've been struggling with this for a few days now and could really use some help... I am working on a Vue 3 application where I'm using VeeValidate for form validation. My form includes dynamically generated input fields based on user selection, but I'm experiencing an scenario where the validation does not trigger correctly for these fields after they are added. I have the following setup: ```javascript <template> <form @submit.prevent="submitForm"> <Field v-for="(field, index) in fields" :key="index" name="dynamicFields[index]" :rules="required"> <input type="text" v-model="field.value" placeholder="Enter value" /> </Field> <button type="button" @click="addField">Add Field</button> <button type="submit">Submit</button> <ErrorMessage name="dynamicFields[index]" /> </form> </template> <script> import { Field, Form, ErrorMessage } from 'vee-validate'; export default { data() { return { fields: [{ value: '' }], }; }, methods: { addField() { this.fields.push({ value: '' }); }, submitForm() { // Submit logic } } }; </script> ``` I can see the fields getting added, but when I try to submit the form, the validation does not seem to trigger for the newly added fields. I expect the validation messages to appear next to these inputs if they are empty, but nothing happens. I have tried using `this.$refs` to access the fields directly, and I've also checked my VeeValidate setup, ensuring it's correctly integrated with Vue 3. However, I still need to get the validation to work properly for dynamic fields. I am using VeeValidate version 4.5.0 and Vue 3.2.0. Any insights or solutions would be greatly appreciated, especially if there are nuances with how VeeValidate handles dynamic fields as I want to adhere to the best practices for form validation in Vue. For context: I'm using Javascript on Windows. Any ideas what could be causing this? I'm working in a Ubuntu 20.04 environment. I'm open to any suggestions.