JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <label for="name">Required + minLength: 5</label>
  <input
    type="text"
    v-model="name"
    v-validate="{
      required: true,
      minLength: 5
      }">

</div>

<script src="https://cdn.rawgit.com/appstract/v-validate/master/src/v-validate.js"></script>

CSS

.valid { border: 1px solid #009688; }

.invalid { border: 1px solid #F44336; }


#id { width: 100%; }

input {
  display: block;
  margin: auto;
  outline: 0;
  border: 1px solid grey;
  font-size: 1.1em;
  border-radius: 5px;
  padding: 5px;
}
 
label {
  display: block;
  text-align: center;
  font-family: sans-serif;
  margin: 40px auto 20px;
}

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    name: ''
  }
});