What could be the problem with two-way checkbox binding in Vuex?

Question

Vue.js

I have a task to bind dynamically created checkboxes to a store in the face of Vuex, I bind them using v-model using a computed variable with a getter and setter as a model, which accordingly receives and commits data to the store. The trouble is that after a couple of clicks, the model starts overwriting and deleting all the data in the store of this checkbox, instead of adding or deleting depending on the state.
Link to jsFiddle

Answer 1

There is one peculiarity in vue when updating objects.
To set/remove a value by key in an object and make it reactive, you need to use

import Vue from 'vue'

// ...

// установка
Vue.set(state.object, key, value)

// удаление
Vue.delete(state.object, key)