Computed value stops reacting after the first change in the state - vue.js

Question

In my component, I have showTrigger computed property and saveDataToStore method that does the update.
computed: {
showTrigger() {
if (typeof store.getters["applicationBuilder/getTriggerById"](this.id) === "undefined") {
return false;
}
return store.getters["applicationBuilder/getTriggerById"](this.id).show;
}
},
methods: {
saveDataToStore(info) {
const trigger = {
id: this.id,
type: this.selected.type,
info: info,
show: false
};
store.dispatch('applicationBuilder/updateTriggerById', trigger);
}
}
My store file:
const state = {
triggers: []
};
const getters = {
getTriggerById: (state) => (id) => {
return state.triggers.find(trigger => trigger.id === id)
}
};
const actions = {
updateTriggerById({commit}, payload) {
commit('mutateTriggerById', payload);
}
};
const mutatations = {
mutateTriggerById(state, payload) {
let index = state.triggers.findIndex(trigger => trigger.id === payload.id)
state.triggers[index].id = payload.id;
if (typeof payload.type !== "undefined") {
state.triggers[index].type = payload.type;
}
if (typeof payload.info !== "undefined") {
state.triggers[index].info = payload.info;
}
if (typeof payload.show !== "undefined") {
state.triggers[index].show = payload.show;
}
}
};
When I initially set the element in array showTrigger picks up the change. But every next change to show property of the trigger array is not firing get in computed value.
Do I have to change how I initiate the array. It doesn't help when I set default values for array in a state like this:
triggers: [
{
id: null,
show: false,
info: {},
type: null
}
],
What am I doing wrong?

Answer 1

After testing your code, I think changing the mutation to add the payload in the first time solves the issue and the computed property started updating every time:
const mutations = {
mutateTriggerById(state, payload) {
let index = state.triggers.findIndex(
(trigger) => trigger.id === payload.id
);
if(state.triggers[index]) {
state.triggers[index].id = payload.id;
if (typeof payload.type !== "undefined") {
state.triggers[index].type = payload.type;
}
if (typeof payload.info !== "undefined") {
state.triggers[index].info = payload.info;
}
if (typeof payload.show !== "undefined") {
state.triggers[index].show = payload.show;
}
}else{
state.triggers.push(payload);
}
}
};