Vue Performance Audit

Audit steps

1. Reactive data misuse — grep src/ for ref([ and reactive([ holding large arrays that should be computed or derived; flag .value access inside templates that could be a computed.
2. Computed vs method — in src/components/ and src/pages/, identify functions called in templates ({{ fn() }}) that should be computed for memoization.
3. Watch overhead — scan for watch with deep: true on large objects; suggest watching specific paths or using watchEffect with narrower scope.
4. v-for pitfalls — grep templates for v-for missing :key, and for v-if + v-for on the same element (always a bug in Vue 3).
5. Pinia getters — check src/stores/ for getters that recompute derived lists on every access; confirm they use computed() inside setup stores.
6. Component splitting — flag page-level components over ~250 lines that could benefit from async child components with defineAsyncComponent.
7. Router lazy-loading — verify every route in src/router/index.ts uses () => import(...) (per project convention); flag any static imports of pages.
8. Bundle size — check src/ for barrel imports like import { everything } from 'lodash' that should be import debounce from 'lodash/debounce'.

Output format

Report findings grouped by severity:

• 🔴 High impact — causes measurable UI jank or network overhead
• 🟡 Medium — degrades as data grows
• 🟢 Low / preventive — good hygiene, no current symptom

Include file path and line number for each finding.

For detailed Vue 3 reactivity pitfalls, see CHECKLIST.md.