howto?

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <div v-for="n in items">
    <input
      v-model="n.value"
      v-format-value="n.handleValue"
      :placeholder="n.placeholder"
    >
    {{ n.value }}
  </div>
</div>

JavaScript

Vue.directive('format-value', {
  bind(el, binding) {
    el.__onInput = e => {
      if (e.isTrusted) {
        e.target.value = binding.value(e.target.value);
        e.target.dispatchEvent(new Event('input'));
      }
    };
    el.addEventListener('input', el.__onInput);
  },
  unbind(el, binding) {
    el.removeEventListener('input', el.__onInput);
    delete el.__onInput;
  },
});

new Vue({
  el: '#app',
  data: {
    items: [
      {
        value: '',
        placeholder: 'целые числа',
        handleValue: v => parseInt(v),
      },
      {
        value: '',
        placeholder: 'целые: [ -5, 10 ]',
        handleValue: v => Math.max(-5, Math.min(10, v | 0)),
      },
      {
        value: '',
        placeholder: 'никаких чисел',
        handleValue: v => v.replace(/\d/g, ''),
      },
    ],
  },
});