JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app1" class="app">
  <div v-for="item in items" class="item">
    <span>{{ item.min }}</span>
    <input v-model="item.val">
    <span>{{ item.max }}</span>
  </div>
</div>

<div id="app2" class="app">
  <div v-for="item in items" class="item">
    <span>{{ item.min }}</span>
    <input v-model="item.val" @input="onInput($event, item)">
    <span>{{ item.max }}</span>
  </div>
</div>

CSS

.app {
  border: 1px solid silver;
  margin: 10px;
  padding: 10px;
}

.item > span {
  display: inline-block;
  width: 50px;
}

.item > span:first-of-type {
  text-align: right;
}

JavaScript

const getData = () => ({
  items: [
    { val: '', min: 1, max: 99 },
    { val: '', min: -273, max: 666 },
    { val: '', min: 0, max: 10000 },
  ],
});

new Vue({
  el: '#app1',
  data: getData(),
  watch: {
    items: {
      deep: true,
      handler(val) {
        val.forEach(n => n.val = Math.max(n.min, Math.min(n.max, parseFloat(n.val) || 0)));
      },
    },
  },
});

new Vue({
  el: '#app2',
  data: getData(),
  methods: {
    onInput(e, item) {
      item.val = Math.max(item.min, Math.min(item.max, parseFloat(e.target.value) || 0));
    },
  },
});