v-for循环里v-model绑定的值不同步响应问题？

Question

这是代码部分`<div id="main">

    <record v-for="item in words" 
            :item="item"
            :key="item.id">
    </record>
    <button @click="change">change</button>
</div>
<script type="text/javascript">
    Vue.component("record",{
        props:["item"],
        template:'<div><input type="text" name="" v-model="name">{{item.name}}</div>',
        data(){
            return{
                name:this.item.name
            }
        }
    });
    new Vue({
        el:"#main",
        data:{
            words:[
                {name:"wang"},
                {name:"wang1"},
                {name:"wang2"},
                {name:"wang3"},
                {name:"wang4"},
                {name:"wang5"},
                {name:"wang6"},
                {name:"wang7"}
            ]
        },
        methods:{
            change(){
                this.words.splice(0,3);
            }
        }
    });
</script>`

运行后效果图如下：

但点击change按钮后，删除了words数组部分元素，效果图如下：

输入框中的值和输入框右方的值就不同步了，按理说应该是一样的，这只是一个小例子，不清楚是什么原理，求大佬指点？

Answer 1

record 的key都是相同的（undefined），应该控制台已经有报错了。设为不同的值即可。