Почему данные не реактивны?

Question

[kot98]

Vue 2.
создаю объект и делаю его реактивным

const templates = reactive(keyBy(templatesArr, 'id'))
      for (let templateId in templates) {
        const devices = devicesArr.filter(device => device.templateId === templateId)
        Object.assign(templates[templateId], { devices }, {settings: {}})
      }

В компоненте получаю его как пропс и заполняю его поле settings (булевыми значениями для чекбоксов):

data () {
  return {
    settings: {
      id: '',
      address: ''
....
     }
   },
  created () {
    for (let key in this.templates) {
      this.templates[key].settings = cloneDeep(this.settings)
    }

Но значения чекбоксов не меняются. Только после обновления шаблона в редакторе.
В чем ошибка?

Answer 1

[Aetae]

В vue 2 добавленые после создания ключи объектов не реактивы из-за технических ограничений. (Раньше это большими буквами в доках писалось).
Надо использовать this.$set \ Vue.set при добавлении нового ключа.

В твоём случае можно переделать так:

const templates = reactive(keyBy(templatesArr, 'id'))
for (let templateId in templates) {
  const devices = devicesArr.filter(device => device.templateId === templateId)
  Vue.set(templates[templateId], 'devices', devices);
  Vue.set(templates[templateId], 'settings', {});
}

// либо просто так:
const templates = keyBy(templatesArr, 'id');
for (let templateId in templates) {
  const devices = devicesArr.filter(device => device.templateId === templateId)
  Object.assign(templates[templateId], { devices }, {settings: {}})
}
reactive(templates);

P.S. не помню чтоб в vue 2 было reactive, вместо него был Vue.observable. Но может добавили, хз, лень смотреть.:)