Вопрос проверяет понимание синтаксиса шаблонов Vue и различий между строковыми и динамическими значениями атрибутов.
key="id" передаёт строку "id", а :key="id" передаёт значение переменной id. В первом случае все элементы получают одинаковый ключ. Во втором — каждый элемент получает свой уникальный ключ. Для списков подходит только динамический вариант. Это критично для корректного обновления DOM.
Различие между key="id" и :key="id" является частным случаем общего правила биндинга атрибутов во Vue.
Во Vue:
атрибут без : трактуется как строка
атрибут с : вычисляется как JavaScript-выражение
<li v-for="item in items" key="id"></li>
Здесь каждый элемент получает одинаковый key.
<li v-for="item in items" :key="item.id"></li>
Здесь key берётся из данных конкретного элемента.
Корректный key:
обеспечивает стабильное сопоставление элементов
предотвращает ошибки состояния
оптимизирует обновление DOM
Для списков во Vue всегда нужно использовать динамический :key, а не строковый key.