Vue 3 patterns — Composition API, composables, reactivity, component design,
97
93%
Does it follow best practices?
Impact
99%
1.33xAverage score across 8 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent extracts async data-fetching logic into a properly structured Vue 3 composable, follows naming and file placement conventions, manages loading/error state with try/catch/finally, and avoids the reactive-object replacement pitfall.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useThing naming convention",
"description": "The composable function is named with the `use` prefix (e.g. `useOrders`, `useCustomers`)",
"max_score": 8
},
{
"name": "composables/ folder",
"description": "The composable file is placed inside a `composables/` directory (e.g. `composables/useThing.ts`)",
"max_score": 8
},
{
"name": "loading ref exposed",
"description": "The composable declares a `loading` ref (boolean) and includes it in the returned object",
"max_score": 8
},
{
"name": "error ref exposed",
"description": "The composable declares an `error` ref (string or null) and includes it in the returned object",
"max_score": 8
},
{
"name": "try/catch/finally pattern",
"description": "The async fetch function uses a try/catch/finally block: sets loading true before the call, catches errors into the error ref, and sets loading false in the finally block",
"max_score": 12
},
{
"name": "Reset error before fetch",
"description": "The error ref is set to null at the start of each fetch attempt (before the try block or at the beginning of the try block), so stale errors are cleared on retry",
"max_score": 8
},
{
"name": "Reload function returned",
"description": "The composable returns a reload/refresh function so consumers can trigger a re-fetch manually",
"max_score": 8
},
{
"name": "Object.assign for reactive reset",
"description": "If a `reactive()` object is reset or bulk-updated anywhere in the composable or component, it uses `Object.assign(target, newValues)` rather than reassigning the variable directly",
"max_score": 12
},
{
"name": "ref for primitive state",
"description": "Primitive values (booleans, strings, numbers) used as reactive state are declared with `ref()`, not `reactive()`",
"max_score": 8
},
{
"name": "Destructured in component",
"description": "The consuming component destructures the composable return value (e.g. `const { items, loading, error, reload } = useThing()`)",
"max_score": 10
},
{
"name": "onMounted triggers load",
"description": "Data loading is triggered inside `onMounted` within the composable so it runs automatically when the component using it mounts",
"max_score": 10
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
vue-best-practices
verifiers