Vue + Vuetify User Login + Auth Form Component

UserAuthForm.vue

<template>
  <v-card id="login-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="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-row no-gutters>
          <v-col>
            <v-checkbox v-model="rememberMe" label="Remember me"></v-checkbox>
          </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 text href="/register">Register</v-btn>
          </v-col>
          <v-col cols="auto" class="ma-0 pa-0">
            <v-btn color="primary" :disabled="!valid" @click="submit"
              >Log in</v-btn
            >
          </v-col>
        </v-row>
      </v-container>
    </v-card-actions>
  </v-card>
</template>

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

export interface AuthPayload {
  email: string
  password: string
}

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

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

  data() {
    return {
      valid: false,
      email: '',
      password: '',
      rememberMe: false,
      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',
      ],
    }
  },

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

      if (this.valid) {
        this.$emit('login', {
          email: this.email,
          password: this.password,
        } as AuthPayload)
      }
    },
  },
})
</script>

Preview: