Vue.js Vuexのstateが配列のときgetterが変更しない

ハマったのでメモ。

vuexでstateが配列のものをgetterで返却していたのですが、stateの配列の値が変わっても変更されませんでした。

vuex/store.js

const module = {
  state: {
    array: null
  },
  mutations: {
    updateArray(state) {
      state.array[0] = '2'//array: ['2', '2', '3']
    },
    initArray(state) {
      state.array[0] = '1' 
      state.array[1] = '2' 
      state.array[2] = '3' 
    }
  },
  getters: {
    getArray(state, getters) => (index) => {
        return state.array[index]  //添え字がindexのものがreturnされている。引数で読み出し元が指定
    }
  }
}

例えば、こんな感じ
(actionsは省略しました。)
mutationsのinitArrayで初期値を登録。 mutationsのupdateArrayでstate.array[0]の値を変更しているのに、
gettersのgetArrayが走りません。

調べてみると、ありました。

forum.vuejs.org

新しい要素の追加方法が悪かったのかな・・？ initArrayは変えずに、updateArrayを以下のように変えました。

vuex/store.js

import Vue from 'vue'
const module = {
  state: {
    array: null
  },
  mutations: {
    updateArray(state) {
      Vue.set(state.array, 0, '2')
      //Vue.set(target, key, value)
    },
/* 省略 */

オブジェクトの場合は以下の方法があるそうです。
vuex/store.js

import Vue from 'vue'
const module = {
  state: {
    array: {}
  },
  mutations: {
    initArray(state, value) {
      state.array = {
        ...state.array,
        value
      }
    },
/* 省略 */


[https://vuex.vuejs.org/ja/mutations.html:title]