A Vue.js subscribe form using Vuetify

SubscribeForm.vue

<template>
  <section id="subscribe" class="bg-white">
    <v-container>
      <v-row row wrap>
        <v-col sm="10" offset-sm="1" md="8" offset-md="2">
          <h2 class="display-2 text-center mb-3">Do you want to know more?</h2>
          <p class="subheading text-center">
            Subscribe to receive updates about the project and be one of the firsts to access!
          </p>

          <v-form ref="subscribeForm">
            <v-container grid-list-xl>
              <v-row wrap>
                <v-col xs="12" sm="6">
                  <v-text-field v-model="newSub.name" :rules="nameRules" label="Name" required></v-text-field>
                </v-col>

                <v-col xs="12" sm="6">
                  <v-text-field v-model="newSub.email" :rules="emailRules" label="E-mail" required></v-text-field>
                </v-col>
                <v-col v-if="showAlert" xs="12" md="6" offset-md="3">
                  <div :class="`text-center mb-1 alert ${alertType}`">{{ alertMessage }}</div>
                </v-col>
                <v-col xs="12" sm="4" offset-sm="4" class="text-center">
                  <v-btn
                    large
                    :loading="isLoading"
                    color="#782fff"
                    class="font-weight-bold text-none white--text"
                    @click="handleSubscribe"
                  >Subscribe!</v-btn>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </v-col>
      </v-row>
    </v-container>
  </section>
</template>

<script>
import SubscriberService from '@/services/SubscriberService'

export default {
  data() {
    return {
      isLoading: false,
      showAlert: false,
      alertType: 'ok',
      alertMessage: '',
      newSub: {
        name: '',
        email: '',
      },
      nameRules: [v => !!v || 'Name is required'],
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid',
      ],
    }
  },
  methods: {
    handleSubscribe() {
      console.log('Subscribing....')
      this.isLoading = true
      if (this.$refs.subscribeForm.validate()) {
        SubscriberService.postSubscriber(this.newSub)
          .then(res => {
            this.isLoading = false
            this.alertMessage = 'You have successfully subscribed 🥰'
            this.showAlert = true
            this.$refs.subscribeForm.reset()
          })
          .catch(err => {
            this.isLoading = false
            this.alertType = 'error'
            this.alertMessage =
              '🤕 There was an error subscribing you. Please try again'
            this.showAlert = true
          })
      } else {
        this.isLoading = false
      }
    },
  },
}
</script>

<style scoped>
.bg-white {
  background-color: white;
}
h1,
h2,
h3 {
  color: #782fff;
}
.alert {
  padding: 0.7rem;
}
.alert.ok {
  background-color: rgba(78, 205, 196, 1);
  border-radius: 5px;
}

.alert.error {
  background-color: red;
  color: white;
}
</style>