删除索引为0的组件，删除所有项目

我在循环中有一个组件，每个组件都有一个删除按钮。

如果删除索引1或更高位置的组件，则删除效果很好，但是当删除索引0（第一个索引）的项目时，所有组件均消失，但Vue控制台中的数据仍然可用。

//form.vue
<template>
  <div>
    <div
      v-for="(item, index) as items"
      :key="index"
    >
      <viewer
        :item="item"
        :index="index"
        @removed="remove"
      ></viewer>
    </div>
  </div>
</template>
<script>
import default {
  //truncated
  data() {
    items: ['sample 1', 'sample 2', 'sample 3']
  },
  methods: {
    remove(index) {
      this.items.splice(index,1)
    }
  }
}
</script>

//viewer.vue
<template>
  <div>
    <div>{{ item }}</div>
    <div @click="remove()">Remove</div>
  </div>
</template>
<script>
import default {
//tuncated
  props: {
    item,
    index
  },
  methods: {
    remove() {
      this.$emit("removed", this.index)
    }
  }
}
</script>