JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/ja.js"></script>
<div id="form">
  <label for="password">パスワード：</label>
  <div>
    <input v-validate="{regex: /^(?=\d{0,99}[a-z])(?=[a-z]{0,99}\d)[a-z\d]{8,100}$/i }" type="password" class="form-control" ref="password" id="password" name="password" placeholder="password1"/>
  </div>
  <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
</div>

JavaScript

Vue.use(VeeValidate, {
  locale: 'ja',
  dictionary: {
    ja: {
      custom: {
        password: {
          regex: 'パスワードは半角英数字をそれぞれ1種類以上含む8文字以上100文字以下で入力してください',
        },
      },
    },
  }
});


new Vue({
  el: '#form'
});