JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <div v-for="(item, i) in items">
    {{ item.name }}
    <input
      type="number"
      ref="input"
      v-model.number="item.val"
      :class="getClasses(item.val)"
    >
    <button @click="$refs.input[i].select()">click me</button>
  </div>
</div>

CSS

* {
  font-family: monospace;
}

input {
  box-sizing: border-box;
  width: 100px;
}

.above-max {
  color: red;
}

.less-zero {
  color: blue;
}

.multiple-of-3 {
  padding-left: 10px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    max: 100,
    items: [...'abcde'].map((n, i) => ({ name: n.repeat(3), val: (i - 1) * 50 })),
  },
  methods: {
    getClasses(val) {
      return {
        'above-max': val > this.max,
        'less-zero': val < 0,
        'multiple-of-3': !(val % 3),
      };
    },
  },
  mounted() {
    this.$nextTick(() => {
      const index = this.items.findIndex(n => n.val > 69);
      if (index !== -1) {
        this.$refs.input[index].select();
      }
    });
  },
});