Vue + Vuetify 2.x User Registration Form Component

UserRegistrationForm.vue

<template>
  <v-card id="register-form-card">
    <v-form ref="form" v-model="valid" @keyup.native.enter="submit">
      <v-container>
        <v-row no-gutters>
          <v-col>
            <v-alert color="error" :value="responseStatus !== ''">{{
              responseStatus
            }}</v-alert>
          </v-col>
        </v-row>

        <v-row no-gutters>
          <v-col>
            <v-text-field
              v-model="firstName"
              label="First name"
              required
              :rules="firstNameRules"
            ></v-text-field>
          </v-col>
        </v-row>

        <v-row no-gutters>
          <v-col>
            <v-text-field
              v-model="lastName"
              label="Last name"
              required
              :rules="lastNameRules"
            ></v-text-field>
          </v-col>
        </v-row>

        <v-row no-gutters>
          <v-col>
            <v-text-field
              v-model="email"
              label="Email"
              type="email"
              required
              :rules="emailRules"
            ></v-text-field>
          </v-col>
        </v-row>

        <v-row no-gutters>
          <v-col>
            <v-text-field
              v-model="password"
              label="Password"
              type="password"
              required
              :rules="passwordRules"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

    <v-card-actions>
      <v-container>
        <v-row justify="end" align="center" class="ma-0">
          <v-col cols="auto" class="ma-0 pa-0">
            <v-btn color="primary" :disabled="!valid" @click="submit"
              >Register</v-btn
            >
          </v-col>
        </v-row>
      </v-container>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import Vue, { PropOptions } from 'vue'

export interface RegisterPayload {
  email: string
  password: string
  firstName: string
  lastName: string
}

export default Vue.extend({
  name: 'UserRegistrationForm',

  props: {
    responseStatus: {
      type: String,
      default: '',
    } as PropOptions<String>,
  },

  data() {
    return {
      valid: false,
      email: '',
      password: '',
      firstName: '',
      lastName: '',
      emailRules: [
        (v: string) => !!v || 'E-mail is required',
        (v: string) => /.+@.+/.test(v) || 'E-mail must be valid',
      ],
      passwordRules: [
        (v: string) => !!v || 'Password is required',
        (v: string) =>
          v.length >= 10 || 'Password must be at least 10 characters',
      ],
      firstNameRules: [
        (v: string) => !!v || 'First name is required',
        (v: string) =>
          v.length >= 3 || 'First name must be at least 3 characters',
      ],
      lastNameRules: [
        (v: string) => !!v || 'Last name is required',
        (v: string) =>
          v.length >= 3 || 'Last name must be at least 3 characters',
      ],
    }
  },

  methods: {
    submit() {
      const form: any = this.$refs.form
      form.validate()

      if (this.valid) {
        this.$emit('register', {
          email: this.email,
          password: this.password,
          firstName: this.firstName,
          lastName: this.lastName,
        } as RegisterPayload)
      }
    },
  },
})
</script>

Preview: