Vuelidate set dirty false for all properties when form is submitted

Question

I have a simple Form with configured Vuelidate validators. It shows an error messages if the input is in dirty state, so when the form is opened at the first time there are no errors.

But when I click submit I expect to get a "clear" form, as well as I just open it, but instead, I get all my validation errors within my input.

Is there any elegant way to reset all vuelidate fields to clear state again, and get clear form?

<script>
  import {required, email} from 'vuelidate/lib/validators'

  export default {
    data() {
      return {
        email: ''
        //there could be a lot of props
      }
    },
    methods: {
      onSubmit() {
        if (!this.$v.$invalid) {
          const user = {
            email: this.email,
            //there could be a lot of props
          };

          console.log(user);

          this.email = '';
        }
      }
    },
    validations: {
      email: {required, email}
    }
  }
</script>

<template>
  <div>
    <form class="form" @submit.prevent="onSubmit">
      <div class="input">
        <label for="email">Email</label>
        <input
          :class="{ error: $v.email.$error }"
          type="email"
          id="email"
          v-model.trim="email"
          @input="$v.email.$touch()">
        <div v-if="$v.email.$dirty">
          <p class="error-message" v-if="!$v.email.email">Please enter a valid email</p>
          <p class="error-message" v-if="!$v.email.required">Email must not be empty</p>
        </div>
      </div>
      <button :disabled="$v.$invalid" type="submit">Submit</button>
    </form>
  </div>
</template>

Answer 1

after some research I found that this.$v.$reset(); makes things