Search code examples
laravelvue.jsvuex

Vuex reactivity - updating array value in the store doesn't update the computed value in a component

I've the followoing mutation setup:

state.user.companies[data.index] = data.company;

That's correctly updating the value in Vuex as far as I can see in the debugger, but the computed value in the different components don't seem to get the value updated. i.e.

company(){
    return this.$store.state.user.companies[this.$store.state.company_index];
},

However, if I execute the following mutation, it does work (but it's not what I need in this specific case):

state.company_index = data.new_index;

Any ideas of what I'm missing to make it work in the first mutation too?

Solution

  • Vue cannot detect when you directly set a non-root state property with the index. For keeping reactivity use set() method.

    Vue.set(state.user.companies, data.index, data.company)