我（仍然）在做一个非常简单的Nuxt3演示，出于某种原因，我的头撞到了一些应该很简单的东西上。
我所做的只是尝试从Coinlore API中获取特定加密货币的数据，并将其显示在一个表中（更多细节请参见我前面的问题）。

{
  "data": [
    {
      "id": "90",
      "symbol": "BTC",
      "name": "Bitcoin",
      "nameid": "bitcoin",
      "rank": 1,
      "price_usd": "20492.28",
      "percent_change_24h": "1.44",
      "percent_change_1h": "-0.14",
      "percent_change_7d": "0.34",
      "market_cap_usd": "390736994700.36",
      "volume24": "22963499957.29",
      "volume24_native": "1120592.68",
      "csupply": "19067521.00",
      "price_btc": "1.00",
      "tsupply": "19067521",
      "msupply": "21000000"
    }
  ],
  "pending": false,
  "error": null
}

所以我要做的就是从data对象中获取第一个（也是唯一的）数组项，并使其在模板中可用。

<script setup>
const route = useRoute()
const { data: coin }  = await useFetch('/api/ticker?id=' + route.params.id)
</script>

<template>
  <div>
    <h2>{{ coin[0].name }} Detail page</h2>
    <table border="1 px solid">
      <thead>
        <th>Symbol</th>
        <th>Rank</th>
        <th>Price - US $</th>
        <th>Market Cap - US $</th>
      </thead>
      <tr>
        <td>{{ coin[0].symbol }}</td>
        <td>{{ coin[0].rank }}</td>
        <td>{{ coin[0].price_usd }}</td>
        <td>{{ coin[0].market_cap_usd }}</td>
      </tr>
    </table>
  </div>
</template>

但是必须对模板中的单个项使用数组表示法是很难看的。
根据我对文档的理解，setup函数中的顶级变量应该在模板中可用，但是当我尝试这样做时

<script setup>
  const route = useRoute()
  const { data }  = await useFetch('/api/ticker?id=' + route.params.id)
  const coin = data[0];
</setup>

<template>
  <h2>{{ coin.name }} Detail page</h2>

...
</template>

我收到错误消息Cannot read properties of undefined (reading 'name')。
所以由于某种原因，我的'coin'变量值没有被赋值给data[0]。
在Vue开发工具检查器中，它如下所示：

如果我这样做：

let coin = ref(data[0]);

我仍然得到未定义的错误。
这确实是我一直在做的基本工作，所以它似乎与Composition API有关。我做错了什么吗？