Craft CMS + Mailchimp signup form in Vue.js

form.js

import Vue from 'vue'
import axios from 'axios'

const apiClient = axios.create({
  baseURL: '',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})

let el = document.querySelector('#signup-form')
if (el !== null) {
  var vm = new Vue({
    delimiters: ['[[', ']]'],
    data: {
      formData: {
        merge_fields: {},
      },
      errors: [],
      success: false
    },
    methods: {
      checkForm() {
        this.errors = []
        if (!this.formData.merge_fields.FNAME) {
          this.errors.push('First name is required.')
        }
        if (!this.formData.merge_fields.LNAME) {
          this.errors.push('Last name is required.')
        }
        if (!this.formData.email) {
          this.errors.push('Email address is required.')
        }
        if (!this.validEmail(this.formData.email)) {
          this.errors.push('Valid email required.')
        }
        if (!this.errors.length) {
          this.formSubmit()
        }
      },
      formSubmit() {
        apiClient.post('/', this.formData)
          .then(response => {
            if (response.data.success === true) {
              this.success = true
            } else {
              this.errors = []
              this.errors.push(response.data.message)
            }
          })
          .catch(error => {
            console.log(error)
          });
      },
      validEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
      }
    },
    beforeMount: function () {
      this.formData.action = el.querySelector('#form-action').value;
      let tokenName = el.querySelector('#csrf-token').name;
      this.formData[tokenName] = el.querySelector('#csrf-token').value;
    }
  })
  vm.$mount(el);
}

form.twig

{# requires Mailchimp Subscribe https://github.com/aelvan/mailchimp-subscribe-craft #}

{% set csrfToken = {
    csrfTokenName: craft.app.config.general.csrfTokenName,
    csrfTokenValue: craft.app.request.csrfToken,
  } 
%}

<form class="newsletter-form" id="signup-form" action="" method="post" v-on:submit.prevent novalidate="true">
  <input type="hidden" id="csrf-token" v-model="formData.{{csrfToken['csrfTokenName']}}" name="{{csrfToken['csrfTokenName']}}" value="{{csrfToken['csrfTokenValue']}}">
  <input type="hidden" id="form-action" v-model="formData.action" name="action" value="mailchimp-subscribe/audience/subscribe">

  <div v-if="!success">
    <p v-if="errors.length">
      <strong>Please correct the following error<span v-if="errors.length > 1">s</span>:</strong>
      <ul>
        <li v-for="error in errors">[[error]]</li>
      </ul>
    </p>
    <div>
      <label for="firstNameInput">
        First name:</label>
      <input required id="firstNameInput" v-model="formData.merge_fields.FNAME" type="text" name="merge_fields[FNAME]"/>
    </div>

    <div>
      <label for="lastNameInput">Last name:</label>
      <input required id="lastNameInput" v-model="formData.merge_fields.LNAME" type="text" name="merge_fields[LNAME]"/>
    </div>

    <div>
      <label for="emailInput">Email:</label>
      <input required id="emailInput" v-model="formData.email" type="text" name="email"/>
    </div>
    <input type="submit" @click="checkForm" value="Subscribe"/>
  </div>
  <div v-else>
    <p>Thanks, you have been subscribed to our list.</p>
  </div>
</form>