title: Vue - Trying to emit a value as a number and getting string when emitted
body: <p>The goal is to have a select box when the value is 1-10 and a number input field if it's +10 with a min and max limit as shown in the code.</p>
  
  <p>Changing values with the select works fine and doesn't return errors, however, when changing values on the field it returns a string.</p>
  
  <p>Also trying to make it so that the number can't get below 1 but the field disappears after I add a negative number</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;QuantityInput
        v-on:qtyChange="updateQty($event)"
        :value="input"
        :selectMin="1"
        :selectMax="20"
      /&gt;
      &lt;p&gt;Quantity Selected: {{ input }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import QuantityInput from "@/components/QuantityInput";
  
  export default {
    name: "App",
    components: {
      QuantityInput
    },
    data() {
      return { input: 1 };
    },
    methods: {
      updateQty(qty) {
        this.input &lt; 1 ? (this.input = 1) : (this.input = qty);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The QuantityInput component</p>
  
  <pre><code>&lt;template&gt;
    &lt;select v-if="qty &lt; 10" v-model="qty" @change="$emit('qtyChange', qty)"&gt;
      &lt;option :value="1"&gt;1&lt;/option&gt;
      &lt;option :value="2"&gt;2&lt;/option&gt;
      &lt;option :value="3"&gt;3&lt;/option&gt;
      &lt;option :value="4"&gt;4&lt;/option&gt;
      &lt;option :value="5"&gt;5&lt;/option&gt;
      &lt;option :value="6"&gt;6&lt;/option&gt;
      &lt;option :value="7"&gt;7&lt;/option&gt;
      &lt;option :value="8"&gt;8&lt;/option&gt;
      &lt;option :value="9"&gt;9&lt;/option&gt;
      &lt;option :value="10"&gt;10+&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;input
      v-else
      type="number"
      :min="selectMin"
      :max="selectMax"
      v-model="qty"
      @change="$emit('qtyChange', qty)"
    /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "QuantityInput",
    props: {
      value: Number,
      selectMin: Number,
      selectMax: Number
    },
    data() {
      return { qty: this.value };
    }
  };
  &lt;/script&gt;
  </code></pre>