Vue 3 Composition API

# Vue 3 Composition API

## Script setup (recommended)
```vue
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const count = ref(0)                       // primitive -> ref
const user = reactive({ name: 'A' })       // object -> reactive
const double = computed(() => count.value * 2)

watch(count, (n, o) => console.log(n, o))

onMounted(() => { /* ... */ })

function inc() { count.value++ }
</script>

<template>
  <button @click="inc">{{ count }} / {{ double }}</button>
</template>
```

## Props / emits
```ts
const props = defineProps<{ title: string; count?: number }>()
const emit = defineEmits<{ (e: 'change', value: number): void }>()
```

## v-model on custom component
- Child: `defineModel<string>()` (3.4+) or props 'modelValue' + emit 'update:modelValue'
- Parent: `<Child v-model="text" />`

## Composables (custom hooks)
```ts
// useCounter.ts
import { ref } from 'vue'
export function useCounter(start = 0) {
  const count = ref(start)
  const inc = () => count.value++
  return { count, inc }
}
```

## Lifecycle
`onBeforeMount`, `onMounted`, `onBeforeUpdate`, `onUpdated`, `onBeforeUnmount`, `onUnmounted`.

## Provide / inject
```ts
// parent
provide('theme', ref('dark'))
// child
const theme = inject<Ref<string>>('theme')
```