The :max doesn’t work properly in html input control when typing in a value

I have a form with inputs based on a model in vue.js. The model contains an array of objects in searchResultOrderLines.

<tr v-for="(item, index) in searchResultOrderLines" v-bind:value="item" v-on:click="editSearchRow(index)">
    <td>
        <input class="form-control" type="number" v-model="item.QuantityPicked" min="0" :max="item.QuantityNeeded" />
    </td>

The input renders as a numeric control with arrows to increment and decrement. It will not allow the user to spin below 0, nor above the value defined in the item.QuantityNeeded, which is as required. However, the user is able to enter a numeric value which is > item.QuantityNeeded, by simply typing into the text box. Is there any way of limiting or preventing this?