你好，
我想請教一下，頁面重新整理後，Vuex的getter無法跟state同步的問題。
我的環境是:Vue3、Vite
遇到問題的情境是:製作會員登出登入的功能。
問題:在登入狀態時，F5重新整理後，重新抓取LocalStorage的資料並更新state的資料，getter的資料同時更新。但畫面卻無法渲染。
這是我的App.vue

//App.vue
<script setup>
//進入網頁
  //獲取token 並存到state跟localStorage
  import { useStore } from "vuex";
  const store = useStore()

  window.addEventListener('load', function(event) {
    if(localStorage.getItem('user')){
      store.commit('onMountedLogin',localStorage.getItem('user'))
    }
    console.log(store.state);
    console.log('重新更新');
  });
  
</script>

這是我的Home.vue

//Home.vue
<script setup>
    import {computed,ref} from 'vue'
    import { useStore } from "vuex";
    const store = useStore()
//獲取登入者資料
    const loginUser =computed(()=>{
        return store.getters.getLoginUser
    })
    const userName =ref(loginUser.value.name)
    const userPermissions =ref(loginUser.value.permissions)
    const getStorage =computed(()=>{
        return localStorage.getItem('user')
    })
</script>
<template>
    <p>{{loginUser}}</p>
    <p>登入者是: {{userName}}</p>
    <p>登入者權限是: {{userPermissions}}</p>
    <p>我是localStorage:{{getStorage}}</p>
</template>

這是我的Vuex

export default createStore({
 state(){
        return{
            loginUser:{}
        }
    },
    getters:{
        getLoginUser(state){
            console.log('getter');
            console.log(state.loginUser);
            return state.loginUser
        }
    },
    mutations:{
        onMountedLogin(state,data){
            //將登入者的資料重新賦予state，防止重整後，資料遺失
            state.loginUser = data
        }
    }
}

渲染的畫面:(使用ref也無法渲染...)

但是getter的資料明明有做更動

這是甚麼原因呢?
忘記補充:這是我的db.json資料格式(測試用會員假資料)