Why value doesn't updated correctly in Vue when using v-for? - vuejs2

Question

I've created basic jsfiddle here.
var child = Vue.component('my-child', {
template:
'<div> '+
'<div>message: <input v-model="mytodoText"></div> <div>todo text: {{todoText}}</div>'+
'<button #click="remove">remove</button>' +
'</div>',
props:['todoText'],
data: function(){
return {
mytodoText: this.todoText
}
},
methods: {
remove: function(){
this.$emit('completed', this.mytodoText);
}
}
});
var root = Vue.component('my-component', {
template: '<div><my-child v-for="(todo, index) in mytodos" v-bind:index="index" v-bind:todoText="todo" v-on:completed="completed"></my-child></div>',
props:['todos'],
data: function(){
return {
mytodos: this.todos
}
},
methods: {
completed: function(todo){
console.log(todo);
var index = this.mytodos.indexOf(todo, 0);
if (index > -1) {
this.mytodos.splice(index, 1);
}
}
}
});
new Vue({
el: "#app",
render: function (h) { return h(root, {
props: {todos: ['text 1', 'text 2', 'text 3']}
});
}
});
Code is simple: root component receives array of todos (strings), iterates them using child component and pass some values through the props
Click on the top "remove" button and you will see the result - I'm expecting to have
message: text 2 todo text: text 2
but instead having:
message: text 1 todo text: text 2
From my understanding vue should remove the first element and leave the rest. But actually I have some kind of "mix".
Can you please explain why does it happen and how it works?

Answer 1

This is due to the fact that Vue try to "reuse" DOM elements in order to minimize DOM mutations. See: https://v2.vuejs.org/v2/guide/list.html#key
You need to assign a unique key to each child component:
v-bind:key="Math.random()"
where in real-world the key would be for example an ID extracted from a database.