Что будет если добавить новый объект в data во Vue

При добавлении нового свойства в объект data во Vue, это свойство не будет реактивным по умолчанию. Vue не может отслеживать изменения свойств, добавленных динамически после инициализации компонента.

Чтобы сделать новое свойство реактивным, используйте Vue.set (или this.$set в компонентах):

this.$set(this.someObject, 'newProperty', 'value')

Пример:

data() {
  return {
    user: { name: 'John' }
  }
},
methods: {
  addAge() {
    // Не реактивно:
    // this.user.age = 30

    // Реактивно:
    this.$set(this.user, 'age', 30)
  }
}

Для массивов аналогично - используйте $set для изменения элементов по индексу или методы массива, которые Vue оборачивает (push, pop, splice и т.д.).