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

Question

Если добавить новое свойство в объект после его инициализации, Vue не сделает его реактивным автоматически. Такое свойство не будет отслеживаться системой реактивности. В результате изменения этого свойства не вызовут обновление шаблона. Это связано с тем, как Vue перехватывает доступ к свойствам. Для корректной работы нужно использовать специальные методы.

YeaHub · Accepted Answer

Реактивность во Vue основана на отслеживании свойств, которые существуют в момент инициализации компонента.Почему возникает проблемаВо время создания компонента Vue:Проходит по всем свойствам объектаДелает их реактивнымиЗапоминает зависимостиЕсли свойство добавляется позже:Vue не знает о его существованииГеттеры и сеттеры для него не создаютсяИзменения не отслеживаютсяПример проблемы:data() {
  return {
    user: {
      name: 'Alex'
    }
  };
}

// позже
this.user.age = 30; // не реактивно
ПоследствияШаблон не обновляетсяcomputed и watch не реагируютПоведение может выглядеть как багКогда это особенно критичноРабота с формамиДинамическое расширение объектовОбновление данных из APIВыводДобавление новых свойств в объект после инициализации не делает их реактивными, поэтому такие изменения не приводят к обновлению интерфейса без специальных приёмов.