useAsyncとaxiosを使った同期通信で、2つのコードの違いを教えてください

Question

Nuxt.jsの学習をしております。
以下のようにuseAsyncとaxiosを使用して、jsonplaceholderから取得したデータを一覧表示しようとしました。

<template>
<div>
  <h1>一覧</h1>
  <ul>
    <li v-for="post in posts" :key=post.id>
      {{ post.title }}
    </li>
  </ul>
</div>
</template>
<script>
import { defineComponent, useAsync } from '@nuxtjs/composition-api'
import axios from 'axios';

export default defineComponent({
  setup() {
    const response = useAsync(async () => await axios.get('https://jsonplaceholder.typicode.com/posts'))
    const posts = response.data
    return { posts }
  },
})
</script>

しかし、画面には循環参照のエラーが出力されました。

Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'TLSSocket' --- property '_httpMessage' closes the circle

そこで、以下のように書き換えたらうまくいきました。

<template>
<div>
  <h1>一覧</h1>
  <ul>
    <li v-for="post in posts" :key=post.id>
      {{ post.title }}
    </li>
  </ul>
</div>
</template>
<script>
import { defineComponent, useAsync } from '@nuxtjs/composition-api'
import axios from 'axios';

export default defineComponent({
  setup() {
    // const response = useAsync(async () => await axios.get('https://jsonplaceholder.typicode.com/posts'))
    // const posts = response.data
    const posts = useAsync(async () => (await axios.get('https://jsonplaceholder.typicode.com/posts')).data)
    return  { posts }
  },
})
</script>

理解が浅くてお恥ずかしいのですが、なぜ、後者はうまくいって前者はうまくいかないのでしょうか。
ご教授お願い致します。