v-for="(item, index) in list"循环子组件，删除第n个组件后，其后的组件会更新，无法保持状态

Question

更新尝试如下：
父组件：

<template>
  <div>
    <div style="height: 45px;"></div>
    <div v-for="(item, index) in list" :key="item.key">
      <child :key="item.key" :value="item" :key="index"></child>
      <div @click="deleteOne(index)">delete</div>
      <div style="height: 40px"></div>
    </div>
  </div>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        list: [
          {val: 111, key: 1},
          {val: 222, key: 2},
          {val: 333, key: 3},
          {val: 444, key: 4},
          {val: 555, key: 5}]
      }
    },
    methods: {
      deleteOne (index) {
        this.list.splice(index, 1)
      }
    }
  }
</script>
<style scoped>
</style>

子组件：
<template>
<div>

{{value}} + {{random}}

</div>
</template>
<script>

export default {
  props: ['value'],
  data () {
    return {
      random: Math.random()
    }
  }
}

</script>
<style scoped>
</style>
测试结果如下：
初始为：

删除3后：

发现删除3后 组件1 2 没有更新，但是 4 5 更新了。
补充问题：有没有办法保持4 5 的状态呢？
—————————————————————————————————————————————————
原问题：
父组件通过remove函数list.splice(n, 1),删除了一个子组件，input被删除的是第n个，但子组件不是第n个而是最后一个，请问怎么做才能实现传删除第n个子组件呢？

父组件：

<div v-for="(item, index) in list">
 <input type="text" v-model="item.data">
 <child :options="item.option"></child>
 <div @click="remove(index)">delete</div>
</div>
data () {
 return {
  list: [
   {data:'123', option: {...}},
   {data:'456', option: {...}},
   {data:'789', option: {...}}
  ]
 }
}
methods: {
 remove(n) {
   list.splice(n, 1)
 }
}

子组件：

<div>...</div>

Answer 1

你目前放上的代码没问题，list是简写了吧 this.list
list.splice(2,1)的时候是删除下标2整项都删除，不会出现2这一项里子对象有的删除错误

Answer 2

为每个子组件加上key试一下

Answer 3

v-if = "key == n"