Vuex-Persistedstate run mutation on reload

Question

I'm using Nuxt 2, Vue 2, Vuex 3, Vuetify 2, vuex-persistedstate 4 and nuxt-i18n 6.

I set this plugin to persiste my Vuex state which is containing RTL status and language code:

plugins/persistedState.client.js:

import createPersistedState from 'vuex-persistedstate'
export default ({ store, req, vuetify, $vuetify }) => {
  createPersistedState({
    paths: [
      'app.isRTL',
      'app.langCode'
    ]
  })(store)
}

Also, I write some mutaion to save this settings in state and apply theme to vuetify:

store/app/index.js:

export default {
  namespaced: true,
  state: {
    isRTL: false,
    langCode: 'en'
  },
  mutations: {
    setRTL: function (state, isRTL) {
      this.app.vuetify.framework.rtl = isRTL
      state.isRTL = isRTL
  },
    setLangCode: function (state, langCode) {
      this.app.vuetify.framework.lang.current  = langCode
      state.langCode = langCode
  },
  }
}

• by calling the setLangCode mutation, the language will be set to given language and save that in the sate
• by calling setRTL rtl direction of vuetify will set correctly and save that in the sate

Theproblem is that on page reload vuex-persistedstate will restore the vuex state from local storage but the mutaion that sets the vuetify settings won't get called, so the vuetify will stay on the worng direction.

Also, the nuxt-i18n will detect the language code from the url not from the state and translates the page base on that.