Readonly issue when using vuex-persistedstate

Question

I'm getting an error that has me stumped. I want to keep the open/close state of the q-drawer component in the Vuex store and keep it open/closed after the page is refreshed. The components work as expected until I add the vue-persistedstate plugin to the store. The console says [Vue warn]: Write operation failed: computed property "drawerOpen" is readonly. I never set anything to readonly on purpose so I cannot find which line of code caused the issue. Other data of the store do not have an issue.

I will post the excerpts of code that are potentially relevant. There are no references to drawerOpen elsewhere in the code.

MainLayout.vue

<q-drawer
      v-model="drawerOpen"
      show-if-above
      bordered
      class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </q-item-label>

        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink.vue'
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'



const linksList = [
  {
    title: 'Dashboard',
    caption: 'See your progress',
    icon: 'dashboard',
    link: ''
  },
  {
    title: 'Courses',
    caption: 'Learn something new',
    icon: 'school',
    link: 'https://github.com/quasarframework'
  },
  {
    title: 'Forum',
    caption: 'Find like-minded people',
    icon: 'chat',
    link: 'https://chat.quasar.dev'
  },
  {
    title: 'Support',
    caption: 'We\'re here to help',
    icon: 'record_voice_over',
    link: 'https://chat.quasar.dev'
  },
];


import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'MainLayout',
  components: {
    EssentialLink
  },
  computed: {
    ...mapGetters({
      username: 'profile/getUsername',
      drawerOpen: 'profile/getDrawerOpen',
    }),
  },
  methods: {
    ...mapActions({
      close_open_drawer: 'profile/toggleDrawer'
    }),
  },
  setup () {
    return {
      essentialLinks: linksList
    }
  }
}
</script>

state.js

export default function () {
  return {
    drawerOpen: true,
    email: '',
    username: '',
    userToken: '',
    test: ''
  }
}

actions.js

...
export const toggleDrawer = (state, payload) => {
  state.commit("toggleDrawer", payload)
}

mutations.js

...
export const toggleDrawer = (state, payload) => {
  state.drawerOpen = !state.drawerOpen
}

index.js

import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

import profile from './profile'

export default store(function (/* { ssrContext } */) {
  const Store = createStore({
    modules: {
      profile
    },
    plugins: [createPersistedState()],
    strict: process.env.DEBUGGING
  })

  return Store
})