Сохранение состояния (key)

При обновлении Vue списка элементов, отображаемого директивой v-for, по умолчанию используется стратегия обновления «на месте». Если порядок элементов массива или объекта изменился, Vue не станет перемещать элементы DOM, а просто обновит каждый элемент «на месте», чтобы он отображал новые данные по соответствующему индексу.

Режим по умолчанию эффективен, но применим только в случаях, когда результат отрисовки вашего списка не полагается на состояние дочерних компонентов или временные состояния DOM (например, значения полей форм).

Чтобы подсказать Vue, как отслеживать идентичность каждого элемента, что позволит переиспользовать и перемещать существующие элементы, нужно указать уникальный атрибут key для каждого элемента:

<div v-for="item in items" v-bind:key="item.id">
  <!-- содержимое -->
</div>

Рекомендуется всегда указывать атрибут key с v-for, кроме случаев когда итерируемый контент DOM прост, или сознательно используется стратегия обновления по умолчанию для улучшения производительности.

В качестве ключей v-for нужно использовать строковые или числовые значения.