Intro

<!-- ===== The model ===== -->
<!-- 1. Components: single-file (.vue) with <template>, <script setup>, <style scoped> -->
<!-- 2. Reactivity: ref / reactive / computed track dependencies automatically -->
<!-- 3. Two-way binding with v-model where it makes sense; props down, events up otherwise -->

<!-- HelloUser.vue -->
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({ name: { type: String, required: true } });
const emit = defineEmits(['save']);

const count = ref(0);
const greeting = computed(() => \`Hello, ${props.name}!\`);
</script>

<template>
  <section>
    <h1>{{ greeting }}</h1>
    <button @click="count++">Clicks: {{ count }}</button>
    <button @click="emit('save', count)">Save</button>
  </section>
</template>

<style scoped>
section { padding: 1rem; }
</style>

<!-- ===== App.vue ===== -->
<script setup>
import HelloUser from './HelloUser.vue';
const onSave = (n) => console.log('saved', n);
</script>

<template>
  <HelloUser name="world" @save="onSave" />
</template>

<!-- ===== Two-way binding ===== -->
<script setup>
import { ref } from 'vue';
const name = ref('');
</script>
<template>
  <input v-model="name" placeholder="Your name" />
  <p>You typed: {{ name }}</p>
</template>

<!-- ===== Lists, conditionals ===== -->
<template>
  <ul>
    <li v-for="u in users" :key="u.id">{{ u.name }}</li>
  </ul>
  <p v-if="users.length === 0">No users yet.</p>
</template>

<!-- ===== Ecosystem ===== -->
<!-- Vue Router  client routing -->
<!-- Pinia        state management -->
<!-- Nuxt         meta-framework: SSR/SSG/ISR -->
<!-- Vite         build tool -->

<!-- ===== When Vue wins ===== -->
<!-- - Gentle learning curve; HTML-first templates -->
<!-- - Small teams shipping fast -->
<!-- - Strong defaults (Pinia, Router, devtools) -->
<!-- - Single-file components that bundle markup, logic, and style -->

<!-- ===== When Vue hurts ===== -->
<!-- - Hiring pool is smaller than React in some markets -->
<!-- - Some third-party UI ecosystems are React-first -->
<!-- - Mixing options API and composition API in a legacy codebase -->

<!-- ===== Patterns to internalise ===== -->
<!-- - <script setup> with composition API is the modern default -->
<!-- - Refs for primitives; reactive() for objects/arrays you'll mutate in place -->
<!-- - Composables (useThing()) for reusable reactive logic -->
<!-- - v-model for inputs; events + props elsewhere -->

<!-- ===== Pitfalls ===== -->
<!-- - Destructuring reactive() -> loses reactivity (use toRefs) -->
<!-- - Mutating props directly -> warning + bugs -->
<!-- - Forgetting :key on v-for -> wrong DOM reuse -->
<!-- - Watch on a deep object without deep: true -> miss nested changes -->

// Vue 3 — Composition API + <script setup>
import { ref } from 'vue';
const count = ref(0);