vuex-persist does not store in localStorage: vue3 migration

Question

I am trying to migrate a project from vue 2 to vue 3. The project uses vuex and vuex-persist to store the state of the application in localStorage.

In vue2, the code was as follows:

import Vuex from 'vuex';
import Vue from 'vue';
import Vapi from 'vuex-rest-api';
import VuexPersistence from 'vuex-persist';

Vue.use(Vuex);

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

const dashboardAPI = new Vapi({
  baseURL,
  axios,
  state: {
    posts: [],
  },
})
.post({...})
.post({...})
.getStore();

const dashboardStore = {
  modules: {
    dashboard,
  },
  plugins: [vuexLocal.plugin],
  ...dashboardAPI,
};

export default new Vuex.Store(dashboardStore);

import router from '@/router';
import store from '@/store';
import App from '@/App';

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

Vue.config.devtools = true;

In vue3, the code was as follows:

import Vuex from 'vuex';
import Vapi from 'vuex-rest-api';
import VuexPersistence from 'vuex-persist';

const dashboardAPI = new Vapi({
  baseURL,
  axios,
  state: {
    posts: [],
  },
})
.post({...})
.post({...})
.getStore();

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

const dashboardStore = {
  modules: {
    dashboard,
  },
  plugins: [vuexLocal.plugin],
  ...dashboardAPI,
};

export default createStore(dashboardStore);

import {createApp} from 'vue'
import App from '@/App';
import router from '@/router';
import store from '@/store';

const app = createApp(App)

app.use(router);
app.use(store);

app.config.devtools = true;
app.config.globalProperties.emitter = emitter;
app.config.globalProperties.$filters = filters

app.mount('#app');

In Vue2 version of the app, the intended data gets stored in localStorage, but in the Vue3 version , it does not. The variables at every stage holds the intended value. The localStorage is added in vue2 code as soon as app is created with new Vue({...}), whereas in case of vue3, const app = createApp(App) and app.use(store); does not do the same.

Could someone point out where I have been making a mistake? Thanks in advance!