vue.js remove object from list with two-way binding - vue.js

Question

I have an array of items that I want to display as the rows of a table. However the rows themselves have inputs, allowing the properties of those items to be edited and emitted back up through v-model into the parents rows array. when i try to delete a row through button in the child that emits the removeRow event, the correct item in the parent's array is deleted but the html only removes the last row of the array.
<tbody>
<row-component
v-for="(row, idx) in rows"
:key="idx"
v-model="rows[idx]"
#removeRow="expenses.splice(idx, 1)"
></row-component>
</tbody>
I think I'm doing something fundamentally wrong, but can't seem to figure out how else to menage a dynamic list of javascript objects that are bound via v-model (or otherwise).
I'll try and prepare a codepen with my problem.

Answer 1

Do not use array indexes to identify elements (keys) in Vue, because with some operations this numbering refreshes. After removing an element from the center of the array, the elements after this position receive a new index value. After removing an element from a 5-element array, with indexes from 0 to 4, you get a 4-element array with indexes from 0 to 3. Vue sees this change as deleting key 4 (last row). Create your own indexes when adding data inside this data.
Vue.component("table-component", {
template: "#table-template",
data() {
return {
rows: [
{ id: 1, name: "A" },
{ id: 2, name: "B" },
{ id: 3, name: "C" },
{ id: 4, name: "D" },
{ id: 5, name: "E" }
]
};
},
methods: {
removeRow(id) {
this.rows = this.rows.filter(row => row.id !== id);
}
}
});
Vue.component("row-component", {
template: "#row-template",
props: ["value"]
});
new Vue().$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table-component :rows="rows" />
</div>
<script type="text/x-template" id="table-template">
<table v-if="rows.length" border="1" cellpadding="3" cellspacing="3">
<tbody>
<row-component v-for="(row, idx) in rows" :key="row.id" v-model="rows[idx]" #removeRow="removeRow"></row-component>
</tbody>
</table>
</script>
<script type="text/x-template" id="row-template">
<tr>
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td><button #click="$emit('removeRow', value.id)">X</button></td>
</tr>
</script>