Vue.jsで連想配列を動的に変更させるときの注意点

Vue.jsで連想配列を動的に変更しようとした時に少しつまづいたので、備忘録として書きます。

やりたかったこと

storeから取得した情報を連想配列に入れてチェックボックスに紐付け、動的に値を変更したかった。

arrayTest.html

<div id="app">
  <div v-for="i in flagArray">
    <input type="checkbox" v-model="flagList[i]">
  </div>
</div>

arrayTest.js

var app = new Vue({
  el: '#app',
  data: {
    flagList: {}
  },
  computed: {
    flagArray: {
      return this.$store.getters.flags;
    }
  },
  methods: {
    setFlag: function () {
      for (var i = 0; i < this.flagArray.length; i++) {
        this.flagList[i] = this.flagArray[i]; ←ここで代入
      }
    }
  }
})

ただ、これを実行してチェックボックスにチェックを入れても、Vue内部では値が変わってくれないという状態に陥っていました…

変更したところ

公式ドキュメントに載ってました。
よくある初心者の落とし穴
オブジェクトの変更検出の注意

結局のところ、直接代入はNGみたいで、下の$set()を使った方法に変更すれば、動的に値を変更してくれました。

arrayTest2.js

  methods: {
    setFlag: function () {
      for (var i = 0; i < this.flagArray.length; i++) {
        // this.$set(array, key, val);
        this.$set(this.flagList, i, this.flagArray[i]); ←これに変更
      }
    }
  }

結論

公式ドキュメントしっかりと読もう。
以上！