VueJS disable sorting when user enters data - vue.js

Question

I have data list which I have bind to input elements in table. When table header are clicked the data list is sorted in asc or desc. Now the problem is e.g.: when user has sort "Name" column in desc and he wants to change first row name to "Dave" from "Jet Li" as soon as he type "D" the list get sorts. What can I implement to have the sorting wait for the user to type and once he finishes he can then again click the headers and sort the data.
Issue gif : Check issue here
My fiddler example : https://jsfiddle.net/bngp6oas/1/
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
}

Answer 1

You could use the .lazy model modifier to only update the value (and therefore the sorting) after the input looses focus.
In your code from the fiddle that would look like:
<input type="text" v-model.lazy="entry[key]" />
See the Vue documentation here: https://v2.vuejs.org/v2/guide/forms.html#lazy

Answer 2

You can make use of the .lazy modifier.
In order to work properly, you will also need to add a unique key to each row.
Updated grid data with keys:
gridData: [
{ id: 1234 , name: 'Chuck Norris', power: Infinity },
{ id: 2345, name: 'Bruce Lee', power: 9000 },
{ id: 3456, name: 'Jackie Chan', power: 7000 },
{ id: 4567, name: 'Jet Li', power: 8000 }
]
See updated fiddle here