Form Validation Not Triggering for Nested Fields on Submit in Vue 3 - guide Needed
I'm sure I'm missing something obvious here, but I'm working with an scenario with form validation in my Vue 3 application using VeeValidate... I have a nested form structure where I want to validate fields within an object, but the validation doesn't seem to trigger when I submit the form. Here's a simplified version of my form component: ```vue <template> <form @submit.prevent="submitForm"> <div> <label for="username">Username:</label> <input v-model="form.username" type="text" name="username" /> <span>{{ errors.username }}</span> </div> <div> <label for="profile.name">Profile Name:</label> <input v-model="form.profile.name" type="text" name="profile.name" /> <span>{{ errors['profile.name'] }}</span> </div> <button type="submit">Submit</button> </form> </template> <script> import { useForm } from 'vee-validate'; export default { setup() { const { handleSubmit, errors } = useForm(); const form = reactive({ username: '', profile: { name: '' }, }); const submitForm = handleSubmit(() => { console.log('Form submitted successfully!', form); }); return { form, submitForm, errors }; }, }; </script> ``` When I fill in the fields and try to submit, I receive an empty validation behavior object, and I can see that the `errors` object isn't getting populated with the expected messages. I've tried using both dot notation and bracket notation for the nested input names, but that doesn't seem to change anything. I also verified that my VeeValidate version is 4.5.0, and I'm following the documentation correctly, but I'm not seeing any validation messages upon submission. Are there any special configurations or best practices for handling nested fields in VeeValidate that I might be missing? Any insights would be much appreciated! What's the best practice here?