Vue3 Vuex Persist not saving data appropriately

Question

I'm having a difficult time getting Vuex-Persist to work properly. Basically, not saving the data it should:

Secondly, it disappears upon refresh. Which defeats the whole point of the library.

Here is my store file:

import { createStore } from "vuex";
import Modules from "./modules";
import VuexPersistence from "vuex-persist";
import Cookies from "js-cookie";

const vuexLocal = new VuexPersistence({
    restoreState: (key: any, storage: any): any => Cookies.get("my-abseil-v3"),
    saveState: (key, state, storage: any): any => {
        return Cookies.set("my-abseil-v3", state, {
            expires: 3,
        });
    },
    modules: ["Auth"],
});

export default createStore({
    plugins: [vuexLocal.plugin],
    modules: { ...Modules },
});

My Auth module code:

import { createStore } from "vuex";
import Modules from "./modules";
import VuexPersistence from "vuex-persist";
import Cookies from "js-cookie";

const vuexLocal = new VuexPersistence({
    restoreState: (key: any, storage: any): any => Cookies.get("my-abseil-v3"),
    saveState: (key, state, storage: any): any => {
        return Cookies.set("my-abseil-v3", state, {
            expires: 3,
        });
    },
    modules: ["Auth"],
});

export default createStore({
    plugins: [vuexLocal.plugin],
    modules: { ...Modules },
});

And my vue.config:

module.exports = {
    transpileDependencies: ["vuex-persist"],
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/css/components/_breakpoints.scss";`,
            },
        },
    },
};

This is per the documentations so not sure where I'm wrong.

Answer 1

have you tried JSON.stringify and JSON.parse?

const vuexLocal = new VuexPersistence({
    restoreState: (key: any, storage: any): any => 
        JSON.parse(Cookies.get("my-abseil-v3")),
    saveState: (key, state, storage: any): any => {
        return Cookies.set("my-abseil-v3", JSON.stringify(state), {
            expires: 3,
        });
    },
    modules: ["Auth"],
});

Answer 2

What about this?

const vuexLocal = new VuexPersistence({
  restoreState: (key, storage) => Cookies.getJSON(key),
  saveState: (key, state, storage) =>
    Cookies.set(key, state, {
      expires: 3
    }),
  modules: ["Auth"],
});