JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<div id="app">
  <hello-world min="20" max="50" init-value="49"></hello-world>
  <hello-world min="10" max="20"></hello-world>
  <hello-world min="33" max="44"></hello-world>
</div>

JavaScript

Vue.component('hello-world', {
  props: [ 'min', 'max', 'initValue' ],
  template: `
<p>
  <input type="number" v-model.number="value">
  <span v-if="wrong">wrong value (must be between {{ min }} and {{ max }})</span>
</p>`,
  data() {
    return {
      value: this.initValue ? +this.initValue : (+this.min + +this.max) / 2 | 0,
    };
  },
  computed: {
    wrong() {
      return this.value < this.min || this.value > this.max;
    },
  },
});

new Vue({
  el: '#app'
});