Reference Type values not updating in localStorage with two way data binding in Vue

So, I am working with this Vue Project where I came across a problem where Reference Type values are not updating in localStorage with two way data binding. Normal strings, numbers, booleans are updated instantly, but reference type values like objects and arrays are not updated in localStorage I created a small demo app to see if I'm doing something wrong in the project, but it gave me the same result. Here's the code:

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {
        form: JSON.parse(localStorage.getItem('form')) ?? {
            first: '',
            second: '',
        },
        single: localStorage.getItem('single') ?? '',
    },
    getters: {
        form(state) { return state.form; },
        single(state) { return state.single; },
    },
    mutations: {
        mutateForm(state, payload) {
            state.form = payload;
            localStorage.setItem('form', JSON.stringify(state.form));
        },
        mutateSingle(state, payload) {
            state.single = payload;
            localStorage.setItem('single', state.single);
        },
    },
});

new Vue({
    el: '#app', store,
    computed: {
        form: {
            get() { return store.getters.form; },
            set(value) { store.commit('mutateForm', value); },
        },
        single: {
            get() { return store.getters.single; },
            set(value) { store.commit('mutateSingle', value); },
        },
    },
});

and here's the related HTML:

<div id="app">
    <input type="text" v-model="form.first">
    <input type="text" v-model="form.second">
    <input type="text" v-model="single">
</div>

I coded this in playcode.io. That's why it is not showing any Vue imports. Anyways, any help would be appreciated :)