Vue 3 배워서 어디에 쓸까?

Vue 3의 ref와 reactive 차이를
비교표 + 코드 예시로 알려줘.
각각 언제 무엇을 써야 하는지 추천도.

Composition API로 useFetch composable을 만들어줘.
ref + onMounted + watch + 에러 처리 +
TypeScript 제네릭으로 타입 안전성 포함.

Nuxt 3 + Pinia + Supabase로 SaaS 대시보드를 설계해줘.
SSR + 인증 + 서버 미들웨어 + Edge 배포 포함.

<!-- Vue 3 레벨별 데모 — 핵심 개념 한 파일 -->
<script setup lang='ts'>
import { ref, reactive, computed, watch, onMounted } from 'vue';

// 🟢 레벨 1: 반응형 상태 + 템플릿
const count = ref(0);
const user = reactive({ name: '아무개', age: 20 });

// 🟡 레벨 2: computed + watch
const doubled = computed(() => count.value * 2);
watch(count, (newVal, oldVal) => console.log(`count: ${oldVal} → ${newVal}`));

// 🔵 레벨 3: composable (재사용 로직)
function useFetch<T>(url: string) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);
  onMounted(async () => {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      data.value = await res.json();
    } catch (e: any) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  });
  return { data, loading, error };
}

const { data: posts, loading } = useFetch<Array<{id: number; title: string}>>('/api/posts');
</script>

<template>
  <!-- 🟢 양방향 바인딩 + 이벤트 -->
  <input v-model='user.name' />
  <button @click='count++'>+1</button>
  <p>{{ count }} (× 2 = {{ doubled }})</p>

  <!-- 🟡 조건부 + 리스트 -->
  <div v-if='loading'>로딩중...</div>
  <ul v-else>
    <li v-for='p in posts' :key='p.id'>{{ p.title }}</li>
  </ul>
</template>

<style scoped>
/* 컴포넌트 범위 스타일 */
button { padding: 8px 16px; }
</style>

<!--
  💡 한 SFC에 Vue 3 핵심이 모두 들어있습니다.
  레벨 1: ref/reactive/v-model/v-on
  레벨 2: computed/watch/v-if/v-for
  레벨 3: composable + TypeScript
  → 다음 챕터에서 기업 활용 사례를 봅니다!
-->