<script setup lang="ts">
/* フェッチが完了する前にナビゲーションが発生します。
  コンポーネントのテンプレート内で 'pending' と 'error' の状態を直接処理します
*/
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))

watch(count, (newCount) => {
  // count は最初は null かもしれないので、
  // その内容にすぐにはアクセスできませんが、監視することはできます。
})
</script>

<template>
  <div>
    {{ status === 'pending' ? 'Loading' : count }}
  </div>
</template>