Почему Vue не строит список, как ожидается?

Осваиваю Vuejs. Делаю редактируемый граф. Пока сделал на svg добавление окружности (узла) по клику, и ее удаление при клике на нее. Для узлов использую v-for с итерацией по массиву объектов. В качестве key - свойство объекта index, которое назначается при создании узла.

Проблема: При удалении узла Vue перестраивает список, при этом index у объектов изменяется, хотя в моем коде используется свойство uniqueId: number с приращением на единицу при добавлении узла. Почему индекс объекта изменяется сам? Что нужно сделать чтобы он сохранялся?

Граф:

<rect x="0" y="0" width="100%" height="100%" fill-opacity="0"
      @click="$emit('graphClick', $event)"
></rect>
<g>
  <circle v-for="node in nodesArr"
          :key="node.index"
          :r="node.r"
          :cx="node.x"
          :cy="node.y"
          @click.left="$emit('nodeLeftClick', node)"
          stroke="black"
          stroke-width="3"
         fill="white"
  ></circle>
</g>
<g>
  <text v-for="node in nodesArr"
        :key="node.index"
        :x="node.x - node.r * 0.5"
        :y="node.y + node.r * 0.5"
        pointer-events="none"
  >{{node.index}}</text>
</g>

Добавление узла:

addNode(x: number, y: number): void {
  const node = { index: this.uniqueId++, x, y, links: new Map(), r: 10 };
  this.nodesArr.push(node);
}

Удаление узла:

removeNode(index: number): void {
  this.nodesArr = this.nodesArr.filter((node: INode) => node.index !== index);
}

Методы родительского компонента:

graphClick(event: MouseEvent): void {
  this.$refs.graph.addNode(event.offsetX, event.offsetY);
}

onNodeLeftClick(node: INode): void {
  this.$refs.graph.removeNode(node.index);
}

Результат: