Vue 3 Form Submission with Vuelidate: Validation Message Not Displaying on Blur Event
I'm sure I'm missing something obvious here, but I'm working on a Vue 3 application that uses Vuelidate for form validation. Everything seems to be set up correctly, but I'm working with an scenario where the validation messages are not displaying when the user leaves a field (on blur event). Instead, they only show up when the form is submitted. I've set up my validations as per the documentation, but I need to figure out what I'm missing. Here's a simplified version of my form component: ```javascript <template> <form @submit.prevent="submitForm"> <div> <label for="email">Email:</label> <input type="email" v-model="email" @blur="$v.email.$touch()" /> <span v-if="!$v.email.$pending && !$v.email.$pending">{{ !$v.email.$pending && $v.email.$invalid ? 'Invalid email' : '' }}</span> </div> <button type="submit">Submit</button> </form> </template> <script> import { required, email } from 'vuelidate/lib/validators'; import useVuelidate from '@vuelidate/core'; export default { data() { return { email: '', }; }, validations() { return { email: { required, email } }; }, setup() { const v$ = useVuelidate(); return { v$ }; }, methods: { submitForm() { this.$v.$touch(); if (this.$v.$invalid) { console.log('Form is invalid'); return; } // Submit logic here } } }; </script> ``` I've tried changing the `@blur` event to `@change` and also used `@input` but none seem to trigger the validation messages as I would expect. My Vuelidate version is 2.0.0, and Vue is at 3.2.0. I'm also ensuring that the `$touch()` method is called correctly when the field loses focus. Am I missing something in the way I'm implementing the validations or handling the events? Any pointers would be greatly appreciated! For context: I'm using Javascript on Linux. I'd really appreciate any guidance on this.