---
name: "vue-3-composition-api-reactivity"
description: "Build modular Vue 3 components with ref, reactive, computed, and custom composables."
metadata:
  author: "Evan You"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write vue 3 composition api"
  - "create vue 3 composable"
  - "watch vs watcheffect vue 3"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Vue 3 Composition API & Fine-Grained Reactivity

Architects Vue 3 applications: <script setup lang='ts'>, ref vs reactive nuances, computed getters/setters, watch vs watchEffect with cleanup, lifecycle hooks (onMounted, onUnmounted), and writing reusable composables.

## When to Invoke
Invoke this skill whenever you need to:
- write vue 3 composition api
- create vue 3 composable
- watch vs watcheffect vue 3

## Execution SOP & Rules
1. Use <script setup lang='ts'> as the default structure for all Vue 3 single file components.
2. Use ref() for primitives and reactive() for deeply nested state objects.
3. Always export composable functions named with 'use' prefix returning plain refs or toRefs.
4. Clean up event listeners and timers in onUnmounted() or watch effect cleanup callbacks.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.