vue.js - Nuxt 3 動的コンポーネントのルート パラメータに基づいて API 呼び出しを行う

Question

ページの読み込み時に動的ルートを使用して API からデータを読み込む、学習目的の単純な Nuxt 3 アプリを作成しようとしています。私が理解しようとしているのはid、コンポジション API でルート パラメータを使用して外部 API を呼び出し、コンポーネントでデータを利用できるようにする方法です。

だからここに私の基本的なフォルダ構造があります：

/pages
   \
   index.vue
   /currency
        \
        [id].vue

index.vue:

<template>
  <main>
    <h1>Index Page</h1>

    <table border="1 px solid">
      <thead>
      <tr>
        <th>Name</th>
        <th>Symbol</th>
        <th>Price</th>
        <th>Details</th>
      </tr>
      <tr v-for="currency in data.data" :key="data.id">
        <td>{{ currency.name }}</td>
        <td>{{ currency.symbol }}</td>
        <td>{{ currency.price_usd }}</td>
        <td>
          <NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>
        </td>
      </tr>
      </thead>
    </table>
  </main>
</template>

<script>
export default {
  async setup() {
    const {data} = await useFetch('/api/coinlore/tickers');

    return {
      data
    };
  }
}
</script>

そして、ここに私が持っているものがあります[id].vue

<template>
  <main>
    <h1>{{ data.data.name }} Detail page</h1>
    {{ $route.params.id }}
  </main>
</template>

<script>
export default {
  async setup() {
    const {data} = await useFetch('/api/coinlore/ticker?id=90');

    console.log(data);

    return {
      data
    };
  }
}
</script>

このブログ投稿から行く私はこれを試しました

<template>
  <main>
    <h1>{{ data.name }} Detail page</h1>
    {{ $route.params.id }}
  </main>
</template>

<script>
export default {
  async setup() {
    const coin = reactive({});
    function fetchCoin(id) {
       const {data} = await useFetch('/api/coinlore/ticker?id=' + $route.params.id);
       coin = data;
    }

    watch('$route.params.id', fetchCoin)

    return {
      coin
    };
  }
}
</script>

しかし、サイコロもありません。

1) API 呼び出しを行い、2)コンポーネントでidparamを使用してデータを入力するにはどうすればよいですか?[id].vue