Cannot set a checkbox unchecked once it has been checked against the data with Vue - vue.js

Question

I am desparately trying to understand what's wrong there and can't figure it out!
I'll try to explain as best as I can, but the code is lengthy and I can't post it easily.
I have a component called "FrameHeader" that includes an input checkbox. This component is called in another component called "Frame", and the frames made from a v-for in another component ("FrameContainer").
In FrameHeader template, I have this:
<input :key="'frame-touchselectbox-'+frameId" type="checkbox"
v-model="touchSelected"
:class="{hidden: !isTouchSelectOn, selectCheckBox: true}"
/>
touchSelected is a computed property defined as such:
computed: {
touchSelected() {
console.log("checking frame touch selected for frame " + this.frameId + " ==> " + store.getters.isFrameTouchSelected(this.frameId));
return store.getters.isFrameTouchSelected(this.frameId);
},
},
where store.getters.isFrameTouchSelected(this.frameId); retrieves a boolean property called "touchSelected" in an object of the state:
The idea is that in the scenario I have, all "touchSelected" properties are first set to false (A), then only the one from one of the frame is set to true (B).
(A):
toggleTouchSelect(state, payload: {frameId: number; toggle: boolean}) {
const newCandidates: number[] = (payload.toggle) ? getAllSiblings(state.frameObjects, payload.frameId): [];
Object.keys(state.frameObjects).forEach((frameKey) => {
Vue.set(
state.frameObjects[parseInt(frameKey)],
"touchSelected",
false
);
Vue.set(
state.frameObjects[parseInt(frameKey)],
"isTouchSelectOn",
newCandidates.includes(parseInt(frameKey))
);
});
},
(B):
touchSelectFrame(state, payload: {frameId: number; isSelected: boolean}) {
Vue.set(
state.frameObjects[payload.frameId],
"touchSelected",
payload.isSelected
);
},
The data I get in the store is correct, I get false/true values where I want them.
However, the checkboxes are not correct. The first time I set one of the frame's property to "true", the corresponding checkbox gets checked. But when I get another frame's property to "true", the previous frame's checkbox doesn't get unchecked. Actually, I see it first being unchecked, then being checked again.
As I said, the data in the state is correct: even when that checkbox revert to checked, the underlying property in the data for that frame is "false".
BUT the weirdest thing is that if only change the checkbox input to a text input (changing the type of the input in the template), the text value is always correct even after the second time I set a frame's property to "true".
So...i'm totally puzzled and can't understand what's happening with those checkboxes.
Sorry for the vague explanation I hope it can still be understandable and that someone will shed a light on that :) Thanks a lot.

Answer 1

Computed props are by default getter-only (reference). That means your checkbox can read the value of touchSelected but can't change its value. You have to use a computed prop with a getter AND a setter. Assuming you have a mutation to change your frameId logic in Vuex:
computed: {
touchSelected: {
get(): {
return store.getters.isFrameTouchSelected(this.frameId);
}
set(newValue): {
store.commit('FRAME_MUTATION', newValue);
}
}
},