Nuxt3 でリロード後もuseStateの値が保持されるようにしたい

Nuxt3で簡単な会員サイトを作成しています．
商品ページも含むため，SSRモードで実行しています．
トークン情報をcomposables/useLoginStoreでグローバルに管理しており，各ページで共有できています．
リロードするとトークン情報が消えてしまうので，LocalStorageに保存しています．
ブラウザのLocalStorageには保存されていて，Jsonへのパースもできているようですが，
どうしても，useLoginStateがサーバサイドで実行されるらしく，トークン情報が初期化されてしまいます．
どのようにすれば，クライアントのみでuseLoginStateが動作するようになるでしょうか？
なお，useLoginStoreは，全ページのヘッダーで使用しています．

該当のソースコード

useLoginStore.tsです．デバッグのため，かなり冗長に記述しております．

typescript

12import { Ref } from "nuxt/dist/app/compat/capi";3 4 5export type loginStore = {6 isLogin: boolean;7 name:string;8 token:string;9};10 11 12export const useLoginStore = ()=>{13 let data=null;14 let jdata: { name: any; token: any; } | null=null;15 let state=null;16 if(typeof window!='undefined'&&window.localStorage){17 data=localStorage.getItem("loginStore");　//clientで動作している．ブラウザのコンソールを見ると，一応ここの分岐には入って入るが，分岐を抜けると，else節で初期化した値になっている．18 jdata=data?JSON.parse(data):null;19 console.log("localStorage read",jdata);20 state=useState("loginStore",()=>({21 isLogin:true,22 name:jdata.name,23 token:jdata.token24 }));25 }else{26 console.log("Serverside"); //サーバで動作している．27 state=useState("loginStore",()=>({28 isLogin:false,29 name:"",30 token:""31 }));32 }33 34 35 console.log("loginStore",state.value); // clientで実行された結果が反映されておらず，サーバで実行された結果が入る．36 37 const setLogin=(state:Ref<loginStore>)=>((name:string,token:string)=>{38 console.log("setLogin",name,token);39 state.value.isLogin=true;40 state.value.name=name;41 state.value.token=token;42 43 localStorage.setItem("loginStore",JSON.stringify(state.value));44 })45 46 const setLogout=(state:Ref<loginStore>)=>(()=>{47 console.log("setLogout");48 state.value.isLogin=false;49 state.value.name="";50 state.value.token="";51 })52 return {53 state:readonly(state),54 setLogin:setLogin(state),55 setLogout:setLogout(state),56 }57}58

補足情報（FW/ツールのバージョンなど）

Nuxt.js v3.65 (SSR mode)