Comment implémenter un formulaire simple avec validation dans une application Vue (avec Vuetify.js)?

j'essaie d'ajouter un formulaire de contact avec simple validation sur un site web construit avec Vue.js utilise un Vuetify.exemple de js. Je suis un débutant, donc je ne suis pas sûr de comment il devrait être mis en œuvre dans un composant D'Evi.

je veux obtenir une validation simple du formulaire côté client et le faire fonctionner avec un https://getform.org/ form.

mise à JOUR:

Code / Contact.vue

(prise de Vuetify.js forme exemple)

<v-form v-model="valid">
      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="Name"
      ></v-text-field>

      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="Email"
      ></v-text-field>

      <v-btn
          @click="submit"
          :disabled="!valid"
      >submit</v-btn>
  </v-form>

  <form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>

Script

<script>
export default {
  name: 'contact',

  data () {
    return {
      snackbar: true, 
      valid: false,
        name: '',
        nameRules: [
          (v) => !!v || 'Name is required',
          (v) => v.length <= 10 || 'Name must be less than 10 characters'
        ],
        email: '',
        emailRules: [
          (v) => !!v || 'E-mail is required',
          (v) => /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(v) || 'E-mail must be valid'
        ]
      }
    },
    methods: {
      submit() {
        nativeForm.submit()
      }
    }
  }
</script>