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">
    <v-input
      v-model="n.value"
      :handle-value="n.handleValue"
      :placeholder="n.placeholder"
    ></v-input>
    {{ n.value }}
  </div>
</div>

JavaScript

Vue.component('v-input', {
  props: [ 'placeholder', 'value', 'handleValue' ],
  template: `<input :placeholder="placeholder" :value="value" @input="onInput">`,
  methods: {
    onInput(e) {
      const val = this.handleValue(e.target.value);
      e.target.value = val;
      this.$emit('input', val);
    },
  },
});

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, ''),
      },
    ],
  },
});