How to implement a simple form with validation in a Vue app (with Vuetify.js)?

Question

I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.

---

I want to achieve a simple client side form validation and make it work with a https://getform.org/ form.

---

UPDATED:

Code | Contact.vue

(taken from Vuetify.js form example)

<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>

Answer 1

Managed to make it work by using just 1 form:

<v-form method="post" action="https://www.getform.org/f/[YOUR-FORM-ID]" id="nativeForm" v-model="valid">

      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="message"
      ></v-text-field>
      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="mail"
      ></v-text-field>

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

script

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

      data () {
         return { 
            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>

Don't forget:

To add name attributes. Getform needs them.