Vue使用v-for动态增加减少的组件，数组中插入(splice)一个对象后，组件中的data都没有刷新怎么办？

Question

上类似代码

// 父组件
<template>
    <childComponents v-for="item in items" :items="items" ref="childs"></childComponents>
    <button @click="addCom"></button>
</template>
<script>
    export default {
        data() {
            return {
                items: [{},{}]
            }
        },
        methods: {
            addCom() {
                this.items.splice(1,0,{})
                this.$nextTick(()=>{
                    this.$refs.childs.forEach((v)=>{
                        console.log(v.something)
                        // first, second, second
                    })
                })
            }
        }
    }
</script>

// 子组件
<template>
    <input v-model="something"></input>
</template>
<script>
    export default {
        data() {
            return {
                something: x //假设第一个输入了first,第二个输入了second,新增的第三个应该是默认的x
            }
        }
    }
</script>

在第一二个子组件输入框输入完，点击button后，确实会在第二行增加一个子组件，但是子组件中的data不对，按照正确的格式，此时的子组件data的something应该依次是first,x,second，可是实际情况却是first,second,second，这种情况我该怎么办。。谢谢各位了

Answer 1

没复现出来这种情况啊。再说你加的是两个{a:3, b:3}。
那么子组件拿到的props：['items']不应该是 1,3,3,2吗

Answer 2

key绑定v-for对象本身会编译报错，我后来绑定了item._ob_.dep.id,就解决了所有问题