Компонент Vue не обновляется при изменении данных без ключа

Question

У меня есть этот простой компонент крошки внутри моего приложения. Есть свойство данных selectedTable, но при его изменении компонент не рендерится повторно. Но когда я добавляю: key = "selectedTable", он перерисовывается. Почему это происходит?

Кто-нибудь еще сталкивался с этой проблемой?

export default {
    template: `
        <div class="cr-snackbar">
            <div class="cr-snackbar-selection">
                Table {{ pickedTable }}
            </div>
        </div>
    `,

    data()
    {
        return {
            pickedTable: '2',
        }
    },

    mounted()
    {
        setInterval(() => {
            this.pickedTable = '3'
        }, 3000)
    }
}

Моим решением было добавить ключ

<div class="cr-snackbar-selection" :key="pickedTable">
  Table {{ pickedTable }}
</div>

Answer 1

Это не проблема, а особенность.

Vue использует алгоритм, который минимизирует перемещение элементов и пытается как можно больше исправлять / повторно использовать элементы одного и того же типа на месте. С ключами, он будет переупорядочивать элементы на основе изменения порядка ключей, а элементы с ключами, которых больше нет, всегда будут удалены / уничтожены.

Вот официальный документ: https://vuejs.org/v2/api/#key

А вот хорошая статья о повторном рендеринге компонентов: https://michaelnthiessen.com/force-re-render/