删除索引时的Vue反应性问题

Question

我有一个带有3个按钮的vue小应用程序

<button @click="add(1)">1</button>
<button @click="add(2)">2</button>
<button @click="add(3)">3</button>

该数字已添加到数组

因此通常您可以得到

[1,2,3,1,3]

我将它们作为列表输出

<div class="numbers" v-for="(number, index) in numbers">
  <span @click="removeNumber(index)">{{ number }}</span>
</div>

但是我的删除号码方法会这样做

removeNumber(index) {

  Vue.delete(this.numbers, index ); // I have also used splice here

},

数据（数字）显示正确的结果，但是UI始终删除最后一个项目而不是我想要的项目。

所以如果我有

numbers = [1,2,3]

我试图删除数字2。数据是正确的，但UI始终删除了数字3。

我怀疑这是一个反应性问题，但无法解决。我也尝试将Vue.delete包装在nextTick（）

中