Setup Vue.js Form Validation using VeeValidate with Bootstrap 4

yarn add vee-validate

npm install vee-validate --save

import Vue from 'vue';import VeeValidate from 'vee-validate';Vue.use(VeeValidate);

<template>  <div>    <form @submit.prevent="onSubmit" class="needs-validation" novalidate>      <div class="form-row  justify-content-md-center">        <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>      </div>      <div class="form-row justify-content-md-center">        <div class="col-md-auto mb-3">          <label for="inputEmail" class="sr-only">Your email</label>          <input v-model="email" v-validate="{ required: true, email: true }" :class="{'form-control': true, 'is-invalid': errors.has('email') && state.isValidation, 'is-valid': !errors.has('email')} && state.isValidation" name="email" type="email" id="inputEmail" placeholder="Your email">          <div class="invalid-feedback">{{ errors.first('email') }} </div>        </div>        <div class="col-md-auto mb-3">          <button type="submit" class="btn btn-primary">Request Invite</button>        </div>      </div>    </form>  </div></template><script>export default {  data() {    return {      email: '',      state: {        isValidation: false      }    }  },  methods: {    onSubmit() {      this.save();    },    save() {      this.isValidation = true      this.$validator.validate().then(valid => {        if (!valid) {        }        else {          // do something        }      });    }  }}</script>