vue.orderby

//https://jsbin.com/kekilasuwu/edit?html,css,js,console,output
Vue.directive('orderby',{
  twoWay: true,
  isLiteral: true,
  checked: false,
  bind: function(el,binding, vNode){
    var self = this;
     const onclick = event => {
      event.stopPropagation()
      vNode.context.$emit(binding.expression, event);
      vNode.context.orderBy.column = binding.value.name;
      binding.value.asc = (binding.value.asc) ? ((binding.value.asc == 'asc') ? 'desc' : 'asc'):'asc'
      vNode.context.orderBy.column.asc = binding.value.asc;
      //console.log(binding.value);
      let className = '';
      el.classList.forEach(function(i){
        if (i != 'asc' && i!= 'desc') {
            className += i +" ";
        }
        
      });
       el.className=className + binding.value.asc;
       vNode.context.orderByCallback();
    }
    el.addEventListener('click', onclick)
  }
});
var app = new Vue({
    el:"#app",
    data:{
      inputA: 'XXX',
      orderBy:{
        column:'',
        asc:'asc'
      }
    },
     methods: {
      orderByCallback: function (event) {
      // `this` inside methods point to the Vue instance
        console.log(this.orderBy);
      }
    }
});