optional validation vuetify

<template>
  <v-form @submit.prevent="submitForm">
    <v-text-field
      v-model="name"
      label="Name"
      :rules="nameRules"
    ></v-text-field>

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

    <v-btn type="submit">Submit</v-btn>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
    };
  },
  computed: {
    nameRules() {
      return [
        (v) => !!v || 'Name is required',
        (v) => (v && v.length <= 20) || 'Name must be less than 20 characters',
      ];
    },
    emailRules() {
      return [
        (v) => !!v || 'Email is required',
        (v) => /.+@.+\..+/.test(v) || 'Email must be valid',
      ];
    },
  },
  methods: {
    submitForm() {
      if (this.$refs.form.validate()) {
        // Form submission logic
      }
    },
  },
};
</script>