Vue converts input[type=number] to a string value : <p>I'm running into the problem, that Vue converts the value of an input field of type number into a string and I just can't figure out why. The guide I am following along does not run into this issue and get's the values as numbers, as expected.</p>

<p>The vue docs state, that Vue would convert the value to a number, if the type of the input is number.</p>

<p>The code is originated from a component, but I adjusted it to run in JSFiddle: <a href="https://jsfiddle.net/d5wLsnvp/3/" rel="noreferrer">https://jsfiddle.net/d5wLsnvp/3/</a></p>

<pre><code>&lt;template&gt;
    &lt;div class="col-sm-6 col-md-4"&gt;
        &lt;div class="panel panel-success"&gt;
            &lt;div class="panel-heading"&gt;
                &lt;h3 class="panel-title"&gt;
                    {{ stock.name }}
                    &lt;small&gt;(Price: {{ stock.price }})&lt;/small&gt;
                &lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
                &lt;div class="pull-left"&gt;
                    &lt;input type="number" class="form-control" placeholder="Quantity" v-model="quantity"/&gt;
                &lt;/div&gt;
                &lt;div class="pull-right"&gt;
                    &lt;button class="btn btn-success" @click="buyStock"&gt;Buy&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
    export default {
        props: ['stock'],
        data() {
            return {
                quantity: 0 // Init with 0 stays a number
            };
        },
        methods: {
            buyStock() {
                const order = {
                    stockId: this.stock.id,
                    stockPrice: this.stock.price,
                    quantity: this.quantity
                };
                console.log(order);
                this.quantity = 0; // Reset to 0 is a number
            }
        }
    }
&lt;/script&gt;
</code></pre>

<p>The quantity value is the issue.
It is initialized with 0 and when I just press the "Buy" button, the console shows:</p>

<pre><code>Object { stockId: 1, stockPrice: 110, quantity: 0 }
</code></pre>

<p>But as soon as I change the value by either using the spinners or just type in  a new value, the console will show:</p>

<pre><code>Object { stockId: 1, stockPrice: 110, quantity: "1" }
</code></pre>

<p>Tested with Firefox 59.0.2 and Chrome 65.0.3325.181. Both state that they are up to date. I actually also tried it in Microsoft Edge, with the same result.</p>

<p>So what am I missing here? Why is Vue not converting the value to a number?</p>
