用nextTick

你要做的是，把 Token 塞到 Call API 的過程用一個 Plugins js 來設定
而不是把塞 Token 的流程綁在 UI 元件裡面。

使用原生 axios 的 request interceptors 設定

https://axios-http.com/docs/interceptors

nuxt.config.js

export default {
  ...,
  plugins: [
    '~/plugins/axios'
  ],
  ...
}

plugins/axios.js

import axios from 'axios'

export default function (ctx, inject) {
  axios.interceptors.request.use(
   config => {
       const token = localStorage.getItem('token')
       if (token) {
           config.headers['Authorization'] = `Bearer ${token}`
       }
       return config;
   },
   error => {
       Promise.reject(error)
   });

  inject('axios', axios)
}

使用 nuxt/axios 的 onRequest interceptors 設定

https://axios.nuxtjs.org/extend

nuxt.config.js

export default {
  modules: ['@nuxtjs/axios'],
  ...,
  plugins: [
    '~/plugins/axios'
  ],
  ...
}

plugins/axios.js

export default function ({ $axios, store }) {
 $axios.onRequest(() => {
     const token = localStorage.getItem('token')
     if (token) {
         config.headers.common['Authorization'] = `Bearer ${token}`
     }
 })
}

呼叫 $axios

export default {
  async asyncData({ $axios }) {
    const test = await $axios.$get('http://test.com')
    return { test }
  },
  
  mounted() {
    this.test = await this.$axios.$get('http://test.com')
  }
}

不確定是否正確理解你的問題，主要就是想在 SSR 可以拿到 localstorage，我之前查印象是不行。我是存 Cookie。

cookie-universal-nuxt 我是用這套件就可以在 SSR 拿到 Cookie。
https://www.npmjs.com/package/cookie-universal-nuxt
用這套件很簡單的可以直接 this.$cookies.set('key', 'value') 操作。

用 asyncData 拿 cookie 範例

async asyncData({ app }) {
    app.$cookies.get('token')
}

如果你是用 Nuxt3 就更簡單
只要用原生的 useCookie
https://nuxt.com/docs/api/composables/use-cookie

然後寫在 nav.vue 是滿怪的，JWT token Nuxt2 通常用 vuex 來寫才對，我是直接在 vuex index 直接 asyncData，存 vuex global 共用。

Nuxt3 也更方便，直接用 useState 就可以共用資料。

如果上述都沒辦法解決你問題，
暴力解你還可以在 Client 端 mounted -> nextTick() 拿到 localstorage 後打 api。 watch/computed api 拿到資料後同步更新組件資料，在這之間做個障眼法先 opacity 0，watch/computed 更新資料後 opacity 1，來避免畫面閃爍問題。

不知道我有沒有理解錯，我做我的Party Room網頁 時，也有一樣的問題。就是我CALL的API要JWT認證。而JWT TOKEN 在localstorage中。每一次Load網頁時，因為JWT還是在客戶機上，所以CALL API時未有JWT TOKEN就會出錯。

我的解決方法是：

onMounted(async() => {
    setTimeout(async() => {
        const { data: result, error: error } = await useFetch(
           'APILINK',
            {
                "method": "post",
                "headers": {
                    "Authorization": "token"
                }
            }
        );


    }, 100);
});

使用onMounted + settimeOut 0.1秒才CALL API，這樣它就夠時間去讀JWT TOKEN，就不會出錯了～

雖然我不知道是不是正確的做法～