render списка v-for

прохожу массив с помощью v-for и передаю данные массива в компонент пропсом, в компоненте есть кнопка удаления элемента из массива, создаю пользовательское события которое передает события удаления элемента в родительский компонент, далее по событию удаляется элемент из массива родительского компонента по индексу с компонента которого события было вызвано и элемент из массива удаляется так как нужно, но при перерисовки списка удалённый элемент остаётся а пропадает самый последний элемент

ПОЧЕМУ ТАК ПРОИСХОДИТ ? И КАК ЭТО ИСПРАВИТЬ ?

родительский компонент:

<template>
  <form class="form grid">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <row :options="item" @delete:item="del(index)"></row>
      </li>
    </ul>
  </form>
</template>

<script>
import row from '@/components/editRow'
// import editInput from '@/components/editInput'
export default {
  props: [
    'content'
  ],
  components: {
    row
  },
  data () {
    return {
      list: this.content
    }
  },
  methods: {
    del (index) {
      console.log(this.list[index])
      this.list.splice(index, 1)
    }
  }
}
</script>

Дочерний компонент:

<template>
  <div class="grid grid_center item">
    <h1>{{ item.text }}</h1>
    <span><button class="btn btn_dark" @click.prevent="itemDelete()">del</button></span>
  </div>
</template>

<script>
export default {
  props: [
    'options'
  ],
  data () {
    return {
      item: this.options
    }
  },
  methods: {
    itemDelete () {
      this.$emit('delete:item', true)
    }
  }
}
</script>