Review Vue 3 composables and <script setup> components for the specific defect classes Vue's own documentation calls out — reactivity lost through destructuring, lifecycle hooks registered outside the synchronous setup window, impure computed() getters, and script-setup components that mix data-fetching, business logic, and presentation with no composable extraction — without re-litigating component prop design, template markup, styling, or SSR/hydration concerns in every response. This skill exists so those adjacent concerns stay out of scope and the review stays focused on the documented reactivity-boundary and composable-extraction catalog.
Use this skill when the user asks to:
\nuse*-prefixed function) before merge,<script setup> component for organization and whether logic should be extracted into a composable,computed() or lifecycle-hook usage is correct.Do not use this skill for:
\nvue-ssr-security-review,toRefs()/guard, not prove which specific runtime instance broke.resolve-library-id (matched result: /vuejs/vue) before labeling any specific pattern as a reactivity-loss bug or a composable-convention violation./vuejs/vue is Vue's core source-and-test repository, not the prose docs site. Use query-docs against it to corroborate exact runtime behavior (e.g., the computed({ get, set }) writable-computed shape, reactive()/ref() tracking mechanics) from source and unit tests. It does not reliably surface the narrative guidance in the Composables and Reactivity Fundamentals guides — for that guidance, use the official_docs URLs in this skill's metadata.json and label the claim documentation-based.reactive()-returned proxy loses reactivity on primitive-valued properties; destructuring a ref() or a toRefs()-wrapped object does not, because each extracted value is itself a ref. Do not apply a blanket \"destructuring is unsafe\" rule — check the return type first.package.json first to confirm Vue 3.x is in use; Composition API and its documented composable conventions (including <script setup>) are Vue 3 features, not Vue 2.official_docs URLs in this skill's metadata.json and label the claim documentation-based, unverified against current release.toRefs()-wrapped reactive object — a plain reactive() object returned for destructuring is the documented reactivity-loss pitfall, not a style preference.use* naming convention and verify that lifecycle hooks (onMounted, onUnmounted, watch, etc.) and other composables are called synchronously during the composable's/component's initial setup()/<script setup> execution — not inside an async callback, await-continuation, conditional, loop, or event handler registered after setup has returned. Vue's synchronous-registration requirement is a hard rule, not a lint nicety: a hook registered after an await silently fails to attach to the correct component instance.computed() in scope, verify the getter is a pure read with no side effects (no state mutation, no async calls, no logging with side effects). A writable computed (computed({ get, set })) is the documented pattern for two-way-bindable derived state — do not flag its set function as an impurity; that is its intended role.<script setup> components for responsibility mixing: data-fetching, validation/business logic, and presentation-only state all inline with no composable extraction. Flag extraction candidates only when the mixed logic is non-trivial and would reduce duplication or improve testability if extracted — do not flag a component for using one or two local ref()s that have no reuse potential.Load these only when needed:
\nref()/reactive()/computed() usage, a suspected destructuring-loses-reactivity bug, or toRef()/toRefs()/unref() interop code.<script setup> responsibility mixing and extraction candidates.Return, at minimum:
\nrepo evidence, documentation-based, or inference),