API

watch

Тип: { [key: string]: string | Function | Object | Array }

Подробности:

Объект, ключи которого — выражения для наблюдения, а значения — коллбэки, вызываемые при их изменении. Значения также могут быть строками с именами методов, или объектами, содержащими дополнительные опции. Экземпляр Vue вызовет $watch() соответствующий каждому ключу объекта при своём создании.

Пример:

const vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('новое значение: %s, старое значение: %s', val, oldVal)
    },
    // строка с именем метода:
    b: 'someMethod',
    // Коллбэк будет вызываться каждый раз, когда изменяется любое из свойств
    // наблюдаемого объекта, независимо от глубины их вложенности
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // коллбэк будет вызван сразу же после начала наблюдения
    d: {
      handler: 'someMethod',
      immediate: true
    },
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // отслеживание значения `vm.e.f`: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => новое значение: 2, старое значение: 1

Не используйте стрелочные функции при указании методов наблюдателей (например, searchQuery: newValue => this.updateAutocomplete(newValue)). Стрелочные функции связываются с родительским контекстом, поэтому this будет указывать не на экземпляр Vue, и this.updateAutocomplete окажется неопределённым.