vuex-persist not updating vuex state

Question

I'm having a difficult time figuring out why my state isn't changing in vuex persist. Part of the code is shown below:

<v-btn
        :disabled="!isEditing"
        color="success"
        @click="save"
>

<v-text-field ref="rowCount"
        :disabled="!isEditing"
        v-model="text"
        autofocus
        color="white"
        label="Number of Rows"
      ></v-text-field>

methods: {
      save () {
        this.isEditing = !this.isEditing
        this.hasSaved = true
        console.log(this.$refs.rowCount.value)
        var payload = {"columns": 9, "rows": parseInt(this.$refs.rowCount.value)}
        this.$store.commit('modifyChunkServerViewBlueprint',payload)
      },
    },

and in store.js I have:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex);

const vuexPersist = new VuexPersist({
  storage: window.localStorage
})

export const store = new Vuex.Store({
  plugins: [vuexPersist.plugin],
  state:{
    chunkServerViewBluePrint: [
      {columns:'2', rows:'8'}
    ]
  },
  mutations:{
    modifyChunkServerViewBlueprint(state, { columns, rows }) {
      state.chunkServerViewBluePrint.columns = columns
      state.chunkServerViewBluePrint.rows = rows
      console.log(state.chunkServerViewBluePrint)
    }
  }
})

From the console I can see the chunkServerViewBluePrint value changes upon clicking the button that triggers the save() method. However when I look at the local storage from vue dev tools nothing changes. All I see is {chunkServerViewBluePrint: [{columns: "2", rows: "8"}]}.

I'm pretty sure the vuex mutation is updating the chunkServerViewBluePrint values as I can see the row and columns value changing from the console.log statement in the mutation. But I'm not sure why vuex-persist is not seeing the change. What am I missing? Thank you.

Answer 1

Turns out it was my mistake. Simple but overlooked. Since the variable chunkServerViewBluePrint is a list, in the mustations it should have been:

state.chunkServerViewBluePrint.columns[0] = columns
state.chunkServerViewBluePrint.rows[0] = rows