Vue splice删除数组元素，dom有变化，但数组的剩余元素

背景:

vue开发一个动态添加和删除表单元素的功能，如图：

代码：

Html

<H5Header :headOptions="headerOpts"></H5Header>
<!--- <div v-for="(people, index) in peoples"> --->
      <div v-for="(people, index) in peoples" v-if="people">
      <div class="column-header flex flex-vc mt30">
        <h2 class="column-tit flex-1">被保人{{index+1}}</h2>
        <a class="delete-btn" href="javascript:;" otype="button" otitle="删除" @click="deletePerson(index)"></a>
      </div>
      <ItemForm ref="itemFormRef" :data="people"></ItemForm>
    </div>

javascript

methods: {
// 继续添加
      createPerson () {
        this.peoples.push(this.newPerson)
      },
      deletePerson (index) {
        if (this.peoples.length === 1) return
//        this.peoples.splice(index, 1)
          this.peoples.splice(index, 1, null)
      },
...
}

正常来说，在删除子容器时，应该可以直接使用vue中数组的重写方法splice进行删除。
如：

this.peoples.splice(index, 1)

但发现，在删除元素后，总是最后面的元素会被删除，界面dom被重新加载，其实并没有被重新渲染，页面中的vue逻辑没有被正常执行。

尝试过多种方式后还是没有解决，感觉应该是当元素被删除后，后面元素的下标发生变化，导致元素中的内容被重新加载，但又没有被渲染。

因此我最终的解决方案是，如上图中所示

this.peoples.splice(index, 1, null)

注意在html中加上v-if="people"的判断是否显示的条件

将数组中要删除的元素设置为空（用v-if去隐藏），但又不改变数组的排列方式，从而最终解决问题。
但是这种解决方式只能说治标不治本，并不是一种最好的解决办法。
因此我想请问各位大神，有没有什么更好的方式可以解决？