<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>