vuelidate doesn't show the message on conditional statement

Question

I'm using vuelidate for the validation of my app ( vue3 ), and for this I have an email field. Obviously, the email field has to have both email and required validations. I'm trying to show a message based on the type of the validation but when I do that using the v-if v-else, it doesn't look to work. Nothing happens and no message is shown. Here is my code

( HTML ):

    <label for="email1" class="form-label">Email</label>
    <input autocomplete="off" type="email" :class="'form-control'" name="email1" id="email1" 
    placeholder="Entrer l'email" required v-model="email">  
    <div class="error" v-if="!$v.email.required">Field is required</div>
   <div class="error" v-if="!$v.email.email">Name must have at least email letters.</div>

( JS )

  data(){
    return{
        $v : useVuelidate(),
        email:'',
    }
},
   validations() {
    return{
        email : {required,email},

   }
   },

Answer 1

That might work

export default {
  setup () {
    return { v$: useVuelidate() }
  },