JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<script src="https://unpkg.com/[email protected]/dist/locale/ja"></script>
<div id="app">
  <p>
    Name: <input :class="{ error: errors.has('name') }" type="text" v-validate.disable="'required|alpha_num'" name="name" data-vv-as="名前">
    <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
  </p>
  <p>
    Email: <input :class="{ error: errors.has('email') }" type="text" v-validate.disable="'required|email'" name="email" data-vv-as="メールアドレス">
    <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span>
  </p>
  <input type="submit" value="Submit" @click="validateForm">
</div>

CSS

body {
  font-family: helvetica;
}

span.error {
  color: red;
}

input {
  border: 1px solid black;
}

input.error {
  border: 1px solid red;
}

JavaScript

// This is what it would look like normally, but we have to make some changes to work with jsfiddle
// import ja from 'vee-validate/dist/locale/ja'
// import VeeValidate, { Validator } from 'vee-validate';

const Validator = VeeValidate.Validator;
Validator.localize('ja');

Vue.use(VeeValidate, { locale: 'ja' });

new Vue({
  el: '#app',
  methods: {
  	validateForm() {
    	this.$validator.validateAll().then(() => {
      
        if (!this.errors.any()) {
          alert('woo no errors');
          // call form submission logic
        }
      })
    }
  }
});