Vuetify switch with Vuex?

Question

Vue.js

<v-switch v-model="this.isPushNotifyEnabled"
                              :color="switchColor"
                              inset
                    />

import {mapGetters} from 'vuex';
    import {SESSION}    from '../../store/modulesNames';

    export default {
        data:     () => (
            {
                // isPushNotifyEnabled: false,
            }
        ),
        computed: {
            switchColor () {
                return '#bdd730';
            },
            ...mapGetters(
                SESSION,
                {
                    isPushNotificationEnabled: `isPushNotificationEnabled`,
                }
            ),
            isPushNotifyEnabled: {
                get: function () {
                    return this.isPushNotificationEnabled;
                },
                set: function (newValue)  {
                    console.log(newValue)
                },
            },
        },

vue.runtime.esm.js?2b0e:619 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: null
warn @ vue.runtime.esm.js?2b0e:619
set @ vue.runtime.esm.js?2b0e:1069
callback @ settings.vue?81dc:79
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
Vue.<computed> @ backend.js:1793
set @ VInput.ts?5bf9:103
onChange @ index.ts?0230:159
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917


client.js?06a0:77 TypeError: Cannot use 'in' operator to search for 'isPushNotifyEnabled' in null
    at Proxy.set (vue.runtime.esm.js?2b0e:1076)
    at callback (settings.vue?81dc:79)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)

Since v-model is a getter, when we click on the switch, an error occurs, which is logical because you need to use a setter to change.
I tried to do it through the @click listener, but the inventory is triggered when the user clicked next to the switch.
Then here I try through komputed, but throws out an error.
There is another option with watch or a combination of
@change and vuetify input-value for the switch, but this is already some kind of dancing with a tambourine.

https://vuetifyjs.com/en/components/selection-controls/
https://vuejs.org/v2/guide/computed.html

Which is correct and why?

Answer 1

<template>
  <v-switch
        v-model="isNotifyEnabled"
        :label="`Switch status: ${isNotifyEnabled.toString()}`"
  ></v-switch>
</template>

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isNotifyEnabled: false
  },
  mutations: {
    updateNotifyEnabled(state, value) {
      state.isNotifyEnabled = value;
    }
  },
});

computed: {
    isNotifyEnabled: {
      get() {
        return this.$store.state.isNotifyEnabled;
      },
      set(value) {
        this.$store.commit("updateNotifyEnabled", value);
      }
    }
}

All this is in the documentation - https://vuex.vuejs.org/ru/guide/forms.html