Nuxtでページの初回アクセス時にFetchやAsync Dataフックの結果が取得できない

Question

Nuxt.jsにてPageのコンポーネントでaxiosを使ってデータを取得しようとしています。

[page/index.vue]
<script>
export default {
  name: 'HomePage',
  data() {
    return {
      somedata: {}
    }
  },
  async asyncData({ $axios, params }) {
    console.log('asyncData')
  },
  async fetch({ $axios, params }) {
    console.log('fetch')
    this.somedata= await $axios.$get('http://localhost:53054/api/index');
    console.log(this.spotifyData)
  }

}
</script>

※ちなみに、
http://localhost:53054/api/index　は同一Nuxt appの中にserverMiddlewareをたてて作成したExpress appで、
responseを返す直前にconsole.log(response)してます。

すると結果、クライアント側のconsoleは↓になり、クライアントサイドの結果はありません。
※axiosをfetch asyncDataどちらに書いても同じです。

Nuxt SSR
　asyncData
  fetch
  {Expressのresponseの中身}

しかし、ここで

• ページ遷移を行いその後indexページに再度（リロードすることなく）アクセスする
• [page/index.vue]を上書き保存

のどちらかを行うと、console(クライアント側)は↓になります。

Nuxt SSR
　asyncData
  fetch
  {Expressのresponseの中身}
（※↑ここまではさっきのアクセスによる結果表示↑※）
asyncData
fetch
{axiosで取得した結果}

都合上、axiosのbaseURLを別URLに向けてるせい？
とも思ったのですが、
設定を外したり、今回のapiのものにするとNuxt appがそもそも起動せずで…
（baseURLを利用した他のURLにbaseURLの同一中身を直記入しても同じく起動せず…）

SSRとaxiosの設定の相性が悪いのでしょうか？
どうしたら初回アクセスからデータが取得できますでしょうか？

Answer 1

質問の内容がおかしかったです。

フロー的にSSRで取得されるので、それはあってました。

templateに取得した内容を利用しようとするとエラーになったので、
書き換えたり質問させていただいたのですが。。。

改めて
asyncData 側に axiosを書き直したらtemplate内に取得した内容を利用できました。

お騒がせいたしました。