VeeValidate-and-Vuetify.js

// Kevin Pilard @kpilard Apr 11 16:17
// @jamesxv7
import { Validator } from 'vee-validate';
var app = new Vue({
    el: '#app',

  created () {
    this.validator = new Validator(this.validationRules)
  },

  data: {
    validator: null,
    validationRules: {
        name: 'required|alpha|min:3',
        email: 'required|alpha|min:3'
     },
    name: null,
    email: null
  },

  computed: {
    errors() {
      let errors = {}
      Object.keys(this.validationRules).forEach(key => {
        if (!errors[key]) {
          errors[key] = []
        }
        this.validator.validate(key, this[key]).catch(() => {})
      })

      this.validator.getErrors().errors.forEach(error => {
        errors[error.field].push(error.msg)
      })
      return errors
    }
  }
});

// ---

 <div id="app">
  <v-text-field v-model="email" label="Email" :rules="errors.email"></v-text-field>
  <v-text-field v-model="name" label="Name" :rules="errors.name"></v-text-field>
</div>
// You could use something like this. You can copy most parts in a mixin to reuse it

How can we also use the above so that it only shows errors once the field is dirty?

Got it working with the below, but is it the best way?

          if (this.fields && this.fields[error.field] && this.fields[error.field].dirty) {
            errors[error.field].push(error.msg);
          }