【Vue.js】オブジェクトの内容を変更しているのにcomputedが変化しない状況への対処

状況

dataに用意したオブジェクトの内容を変更しているのにcomputedが変化しなくて困っていました。

対処

前提

dataに宣言する時点でプロパティを宣言しておけばVueが更新を追ってくれるので、基本はプロパティを宣言しておいた方がいいらしいです。

// ダメなやり方
data() {
  return {
    hogeObject: {}
  }
}

// いいやり方
data() {
  return {
    hogeObject: {
      fugaKey: null
    }
  }
}

今回の場合

初めからプロパティを宣言できない場合、$setを使うとできます。

// 改善前
this.hogeObject[fugaKey] = piyoValue

// 改善後
this.$set(this.hogeObject, fugaKey, piyoValue)

参考にさせていただいたサイト

• Vue.jsでビューの変更がされないときに疑うこと+主な解決策方法 - Qiita