JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.18/vee-validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/2.1.10/vue.min.js"></script>
<div id="app">
  <input v-validate="email" data-vv-rules="required|email" v-model="email" type="text" name="email">
  <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
  
  <button @click="validate">validate</button>
</div>

JavaScript

Vue.use(VeeValidate);

const post = () => {
	return new Promise((resolve) => {
  	setTimeout(() => resolve(), 1000);
  });
}

new Vue({
	el: '#app',
  data: () => ({
  	email: ''
  }),
  methods: {
  	validate() {
    	this.$validator.validateAll().then(success => {
         if (! success) {
         	return;
         }
         
         post().then(() => {
           this.email = '';
           alert('success');
         }).then(() => {
         	 this.errors.clear();
         });
      });
    }
  }
});