Apply directive to dynamically style elements

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div v-for="n in items">
    {{ n.name }}
    <input type="number" v-model.number="n.val" v-xxx="n">
  </div>
</div>

CSS

* {
  font-family: monospace;
}

JavaScript

Vue.directive('xxx', {
  inserted(el, binding, vnode) {
    vnode.context.xxx(el, binding.value);
  },
});

new Vue({
  el: '#app',
  data: () => ({
    max: 100,
    items: [...'abcde'].map((n, i) => ({ name: n.repeat(3), val: (i - 1) * 50 })),
  }),
  methods: {
    xxx(el, data) {
      console.log(data.name);
      el.style.marginLeft = `${Math.random() * 50 | 0}px`;
    },
  },
});