Nuxt3 error with external axios library

[silk wolf]

Hello 👋

I'm having an issue while migrating from Nuxt 2 to Nuxt 3, I know that with Nuxt 3 the default now is to use useFetch, but we have a library that actually fetches the data for us, and this library is using axios under the hood. Updating the library at the moment is out of question, since we still need to support other Nuxt 2 apps we didn't migrate yet.

The main issue is that I receive an error when I try to fetch my book data, the same call works fine on Nuxt 2:

Error:

Error: Converting circular structure to JSON\n    --> starting at object with constructor 'ComputedRefImpl'\n    |     property 'effect' -> object with constructor 'ReactiveEffect'\n    --- property 'computed' closes the circle"

axios interceptors

axiosInstance.interceptors.response.use(
      (response) => response,
      (error) => {
        onError(error)
        return Promise.reject(error)
      }
    )

axios call from the library:

const rawResponse = await axiosInstance.get(
  `/api/books/${getSafeSlug(slug)}`,
  { params }
)

return rawResponse.data

<!-- nuxt page component -->
<template>
  <pre>
    {{ data }}
  </pre>
</template>

<script setup lang="ts">
const data = await useAsyncData("book", async (nuxtApp) => nuxtApp.$webApi.book("atomic-habits-en"))
</script>

Any idea on how to fix this without having to convert everything to useFetch?

Some important versions:
"nuxt": "^3.6.5",
"vue": "3.3.4",

In the library where we use axios:
"axios": "^0.27.2",

[strange yoke]

you need to destructure data from useAsyncData

like this:

const {data} = useAsyncData()

[silk wolf]

@strange yoke that removed the error, but no data is returned

My endpoint does not return "data" in itself, but directly my book object