Что произойдёт, если добавить новое свойство в объект после его инициализации во Vue?

Реактивность во Vue основана на отслеживании свойств, которые существуют в момент инициализации компонента.

Почему возникает проблема

Во время создания компонента Vue:

• Проходит по всем свойствам объекта

• Делает их реактивными

• Запоминает зависимости

Если свойство добавляется позже:

• Vue не знает о его существовании

• Геттеры и сеттеры для него не создаются

• Изменения не отслеживаются

Пример проблемы:

data() {
  return {
    user: {
      name: 'Alex'
    }
  };
}

// позже
this.user.age = 30; // не реактивно

Последствия

• Шаблон не обновляется

• computed и watch не реагируют

• Поведение может выглядеть как баг

Когда это особенно критично

1. Работа с формами

2. Динамическое расширение объектов

3. Обновление данных из API

Вывод

Добавление новых свойств в объект после инициализации не делает их реактивными, поэтому такие изменения не приводят к обновлению интерфейса без специальных приёмов.