Angular to Vue

1-form.js

function checkValidity(el) {
  if (el.checkValidity()) {
    el.$valid = true;
    el.$invalid = false;
  } else {
    el.$valid = false;
    el.$invalid = true;
  }
}

function change(e) {
  const el = e.target;
  el.$dirty = true;
  el.$pristine = false;
  checkValidity(el);
}

function blur(e) {
  const el = e.target;
  el.$touched = true;
  el.$untouched = false;
}

export default {
  name: 'v-form',
  bind(el) {
    el.$dirty = false;
    el.$pristine = true;
    el.$touched = false;
    el.$untouched = true;
    checkValidity(el);
    el.addEventListener('change', change);
    el.addEventListener('blur', blur);
  },
  unbind(el) {
    el.removeEventListener('change', change);
    el.removeEventListener('blur', blur);
  },
};

2-main.js

import formDirective from './directives/form';

Vue.directive('form', formDirective);