Nuxt3のuseAsyncDataのhandlerにaxiosのラッパーメソッドを渡すとサーバーサイドでのみ動かなくなる

Question

実現したいこと

Nuxt3のuseAsyncDataメソッドのhandler引数にaxiosのラッパーメソッドを渡して、サーバーサイドでもapiと通信したい。

ソースコード

<script setup lang="ts">
import request from '@/utils/request'

const {data} = await useAsyncData<T>(async () => {
  const data = await request.get<T>('/api/example')
  return data
})
</script>

<template>
// クライアントサイド apiと通信できている
// バックエンド apiと通信できずdata.value === nullになる
{{ data }}
</template>

export default () => {
  async get<T> (path: string) {
     // 簡略化のため省略
     const res = await axios.get(baseURL + path)
     return res.data
  }
}

問題

クライアントサイドでバックエンドと通信を行う場合は、dataを取得できていますが、サーバーサイドでバックエンドと通信を行う場合にdataを取得できません。
また、useAsyncDataのhandler引数にaxiosのラッパーメソッドではなくaxios関数をそのまま渡した場合はクライアントサイド・サーバーサイドの両方で通信が成功します。

<script setup lang="ts">
const {data} = await useAsyncData<T>(async () => {
  const res = await axios.get<T>('http://localhost:8080/api/example')
  return res.data
})
</script>

なぜaxiosのラッパーメソッドをハンドラー引数として使用した場合に、サーバーサイドの通信が失敗するのかを教えていただきたいです。

Comments

[FKM]

ラッパーに値が受け渡しできていないだけの可能性が考えられます。
const res = await axios.get(baseURL + path)
console.log(res)
return res.data

とやってどうなりますか？