Vuelidate: validate on click, not when field touched

Then the only thing you have to do after setting up the validations is to call a method that will validate the errors. So follow below:

<button @click="validate">Submit</button>

The method:

validate () {
  this.$v.$touch() //it will validate all fields
  if (!this.$v.$invalid) { //invalid, becomes true when a validations return false
   //you dont have validation error.So do what u want to do here
  }
}

I could never really get used to the Vuelidate way of doing things, but, generally speaking, it works like this: https://monterail.github.io/vuelidate/#sub-basic-form

Setting it up like this allows you to have validation for each form input/element and then an overall check to see if the form is "dirty" and/or "invalid"

form: {
"name": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
  "required": {
    "type": "required"
  }
}
},
"Age": {
  "required": false,
  "$invalid": true,
  "$dirty": false,
  "$error": false,
  "$pending": false,
  "$params": {
    "required": {
      "type": "required"
    }
  }
},
"$invalid": true,  <------- This is what you are after for valid/invalid
"$dirty": false,   <------- This is what you are after to see if the form has been used.
"$error": false,  <-------  This checks both invalid and dirty
"$pending": false,
"$params": {
   "nestedA": null,
   "nestedB": null
}
}

As far as using this in practice, one option would be to call validateform event on submit.

@click.prevent="validateform"

Then create a validateform method in your vue instance that checks

$v.form.$invalid  or $v.form.$error

then either display errors or call the actual submit method