Vue & Vuex: no re-render after object key value mutation

I’m using vuex store value in front side

...mapGetters({ value : 'store/value' });

I’m facing a very strange situation:

• If I update de store value like this then it re-renders and updated value appears on front side

UPDATE_VALUE: (state, value) => {
  state.value = value;
}

• But if I try to update it like, so it mutates the store value but does not re-render

UPDATE_VALUE: (state, {key, value}) => {
  state.value[key] = value;
}

Do you have any idea ?

>Solution :

Oh, That problem!

That’s the weird part of the reactivity system in vue 2, which I strongly recommend you to use vue 3, to avoid this. In version 3, proxies are far more better and understandable.

But, for solution, you can use Vue’s Vue.set method (or this.$set inside a component) to ensure that the change is reactive:

import Vue from 'vue';

UPDATE_VALUE: (state, {key, value}) => {
  Vue.set(state.value, key, value);
}

or if you like:

UPDATE_VALUE: (state, {key, value}) => {
  state.value = { ...state.value, [key]: value };
}

Both will work. Best of Luck!