JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

  <input
    v-for="item in items"
    v-model="item.name"
    v-input-test="item.name"
  >

</div>

Babel + JSX

const directiveData = new Map();

function getKey(e) {
  console.log('key:', e.key);
  console.log('el:', this);
  console.log('binding.value:', directiveData.get(this));
}

Vue.directive('input-test', {
  bind(el, binding) {
    directiveData.set(el, binding);
    el.addEventListener('keydown', getKey);
  },
  unbind(el, binding) {
    directiveData.delete(el);
    el.removeEventListener('keydown', getKey);
  },
});


new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Iron Man' },
      { name: 'Thor' },
      { name: 'Hulk' },
    ],
  },
});