Vuex показывает разные значения в состоянии и хранилище

Question

Я все еще новичок в Vue js, я пытаюсь сохранить свое состояние Vuex с помощью vuex-persit => https://www.npmjs.com/package/vuex-persist

Хотя я получаю странный ответ.Хранилище является исходной формой хранения, Vuex работает отлично, но когда я обновляю значения, значения в хранилище не меняются при изменении состояния.Проблема в том, что когда я загружаю страницу, значения в хранилище загружаются первыми, а значения в состоянии появляются позже.

Вот мой код

    import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
   key: 'deity-academy',
   storage: window.localStorage,
   supportCircular: true,
})

export default {
  namespaced: true,
  state:{
     auth: {
          state: null,
          token: null,
          user: {
              role: null,
          }
      },
  },

  mutations:{
    setPin(state, pin){
      let authpin = pin.replace(/\s/g, "").length 
      if (authpin == 4) {

          state.input.pin = pin 
          state.readonly.pin = true

          return HTTP().post('auth/verify', {
              phone: state.input.phone,
              code: state.input.pin,
              token: state.auth.token
          }).then((res) => {
              state.valid.pin = null
              state.verify.sent = true
              if (res.data.success === true) {
                  state.auth.state = 'logged'
                  state.input.pin = null
                  state.auth.token = res.data.token.token
              }

              if (res.data.status === 'ERROR') {
                  state.valid.pin = false

                  let errormessage = res.data.message.replace(/_/g, " ")
                  state.feedback.pin = errormessage.toLowerCase()
              }

          }).catch((err) => {
              state.valid.pin = false
              state.readonly.pin = false
              state.disabled.pin = false

              if (err.response.status == 500) {
                  state.feedback.pin = 'Request failed'
              }

              if (err.response.status == 404 || err.response.status == 401 || err.response.status == 400) {
                  if (typeof err.response.data.error === 'undefined') {
                      state.feedback.pin = err.response.data.message
                      return
                  }

                  state.feedback.pin = err.response.data.error

                  return
              }
              state.feedback.pin = err.response.data[0].message
              return
          })
      }
    }
  },

  plugins: [vuexLocal.plugin],
}