What changed in Vue 3.5's reactivity internals, and what remains the useful mental model?

Vue 3.5 changed the bookkeeping, not the application contract: reactive reads are tracked, writes invalidate subscribers, and scheduled effects run again. - Dependency and subscriber relationships use doubly linked lists with versioned links, making subscription cleanup and reuse cheaper. - A global version gives computed values a fast path when no reactive mutation has happened since their last evaluation. - Proxies still intercept object and collection operations, while refs perform equivalent tracking through value. - I use these details to explain profiles and stale updates, but product code must not depend on private Dep or effect fields.

In production Composition API code, how do you choose between ref and reactive?

I default to ref for replaceable values and use reactive for a cohesive object that stays behind one stable proxy. - A primitive, nullable DOM handle, or replaceable request result fits ref because assigning value is explicit and tracked. - A form with many fields updated in place fits reactive, but replacing the local proxy variable does not update consumers holding the old proxy. - Destructuring a reactive property into a plain variable loses its live connection, so I use toRef, toRefs, or a getter at that boundary. - For reusable composables, I accept refs or getters and normalize with toValue instead of forcing callers into one container type.

Explain what Vue tracks when an effect reads state.user.name and which writes can trigger it.

Vue records dependencies by raw target and operation key, so this expression subscribes to each reactive property read along the path. - Conceptually, a WeakMap maps each raw target to a Map whose keys point to dependency sets for active effects. - Reading state.user tracks the state target with key user, then reading name tracks the nested user target with key name. - Replacing state.user triggers the first dependency, while changing user.name triggers the second; changing an unrelated user field does not. - Iteration uses special dependencies, so adding or deleting keys can rerun Object.keys, for...in, Map key iteration, or array length consumers.

How does Vue batch component updates and watcher callbacks, and when would you change flush timing?

Vue queues most reactive jobs into one microtask, deduplicates them, and flushes them in a stable order instead of rendering after every write. - Parent component jobs run before child jobs, which avoids updating a child that the parent has already unmounted. - A default pre watcher runs after parent updates but before its owner's DOM patch, so its callback must not read the owner's final DOM. - I use flush: 'post' for DOM measurement after Vue patches, and nextTick when imperative code only needs to await the current flush. - I reserve flush: 'sync' for tiny invariants because it bypasses batching and can fire once per array mutation or loop iteration.

How does computed achieve lazy evaluation and correct invalidation in Vue 3.5?

A computed value caches its result and invalidates that cache when a tracked source changes, but it does not evaluate the getter again until value is read. - The first read runs the getter under the computed subscriber and records only dependencies touched by the active branch. - Source writes update dependency versions and mark the computed dirty, separating invalidation from recomputation. - On the next read, Vue can skip work through the global version fast path or verify dependency versions before rerunning the getter. - The getter should stay pure because side effects inside a lazy cached computation have surprising timing and cleanup semantics.

How do watch and watchEffect differ, and how do you cancel stale work with Vue 3.5 cleanup APIs?

I use watch when the source and callback contract must be explicit, and watchEffect when one synchronous function can discover its own reactive reads. - watch is lazy by default and provides new and old values; watchEffect runs immediately and tracks only reads made before the first await. - For a request, I create an AbortController per run and abort it before the watcher reruns or stops. - In Vue 3.5, onWatcherCleanup registers that invalidation cleanup but must be called during the synchronous watcher execution, not after await. - The callback onCleanup argument remains bound to the watcher and is useful when cleanup must be registered after asynchronous code.

When do you create an effectScope, and what lifecycle mistakes does it prevent?

I create an effectScope when several watchers and computed values need one owner outside the lifecycle already provided by a component setup. - Effects created synchronously inside scope.run are captured, and scope.stop disposes them together. - Nested scopes stop with their parent, while effectScope(true) is detached and therefore needs an explicit long-lived owner. - A composable uses onScopeDispose for timers, subscriptions, and external resources tied to the current scope. - Effects created later in an asynchronous callback may miss the active scope, so I create them synchronously or retain and call their stop handles.

When are shallowRef and triggerRef better than deep Vue reactivity?

I use shallowRef when Vue should react to replacing a top-level value but must not proxy or track its nested object graph. - It suits a large immutable snapshot, a third-party state object, or an editor instance whose internals have their own lifecycle. - Replacing snapshot.value notifies consumers, while mutating snapshot.value.items in place does not. - If an integration must mutate that object in place, triggerRef explicitly notifies consumers after the mutation. - Manual triggering weakens normal data-flow guarantees, so I keep it inside a narrow adapter and prefer replacement for application state.

What identity problems can markRaw and toRaw introduce, and how do you avoid them?

Both APIs cross the proxy boundary, so I use them narrowly and never let raw and proxied versions become competing identities in domain state. - markRaw prevents the marked root object from being proxied, which is appropriate for a class instance or external widget owned by another library. - Its nested objects are not automatically protected when inserted elsewhere, so raw.nested and a proxied nested value can fail strict identity checks. - toRaw returns the original object for a temporary integration or inspection, but reads and writes through it bypass normal tracking and triggering. - For Map keys, caches, and equality checks, I normalize to one representation or use a stable domain ID instead of object identity.

How do stable keys and compiler patch flags reduce Vue's update work for a dynamic list?

Stable keys preserve vnode identity during list changes, while compiler hints let the runtime inspect only the dynamic parts that can actually change. - The keyed diff first syncs matching prefixes and suffixes, then maps remaining new keys to locate reusable old nodes. - It unmounts missing nodes, mounts new ones, and uses a longest increasing subsequence to minimize DOM moves among retained nodes. - Unique domain IDs are valid keys; array indexes are unsafe when insertion, deletion, or sorting must preserve component state. - Patch flags identify dynamic text, class, style, props, and keyed fragments, while block dynamicChildren let Vue skip static descendants.

A useRealtimeOrders composable is called from route components and from a detached effectScope; how should it define ownership and cleanup?

The scope that starts a reactive effect or external resource should own its disposal unless the resource is explicitly shared. - Per-call watchers, socket listeners, timers, and requests should register cleanup with onScopeDispose, including aborting in-flight work. - A shared socket needs a service-level owner with reference counting or an explicit dispose operation so one component cannot close it for every consumer. - A detached effectScope must expose a stop handle owned by an application or request boundary, and a repeated mount-unmount test should return listener and task counts to baseline.

A deeply nested form needs a locale-aware validation service; how would you design provide and inject with a typed InjectionKey?

I would expose one typed context contract and keep its mutable implementation inside the provider. - Export a unique symbol typed as InjectionKey so provide and inject agree on state, commands, and return types without string-key collisions. - Provide readonly reactive state plus operations such as validateField, and make required consumers fail fast when inject returns undefined. - Use a default only when standalone behavior is genuinely valid, and create the provided service per application or SSR request when it contains mutable user state.

How would you implement a controlled pagination component with defineModel in Vue 3.4 or 3.5?

I would make the parent the source of truth and use defineModel to express the prop and update event as one typed ref. - const page = defineModel ('page', { required: true }) compiles to a page prop and update:page event, so assigning page.value requests a parent update. - The parent binds v-model:page, while transient details such as focus and hover remain local because they do not need external coordination. - Separate page and pageSize models are clearer than mirrored local copies, but their defaults, update timing, and validation still belong in the public contract.

A reusable text input supports trim and capitalize v-model modifiers; how should defineModel transformers work, and what default-value risk must you handle?

Read the model modifiers in a setter transformer and emit one normalized value while keeping the parent and child synchronized. - Destructure const [model, modifiers] = defineModel () and let set inspect modifiers.trim or modifiers.capitalize before returning the emitted value. - Keep the transformer type-preserving and idempotent, and leave validation errors explicit rather than silently converting invalid domain values. - A child default can start model at a value while the parent's bound ref remains undefined, so initialize the parent, require the model, or omit the child default.

A component library supports Vue 3.4 and 3.5, and a destructured prop must drive a watcher; how do reactive props destructuring rules affect the implementation?

Vue 3.5 makes destructured defineProps bindings reactive, but a cross-version library should not rely on that behavior without setting its minimum version. - In Vue 3.5, the script setup compiler rewrites reads of a destructured prop to the underlying props property, and JavaScript destructuring syntax can supply defaults. - A watcher or composable should receive () => foo or a getter-based toRef, because passing foo directly supplies its current value rather than a reactive source. - The transform applies only to defineProps destructuring in the same script setup block; ordinary reactive-object destructuring can still lose the property link. - For Vue 3.4 compatibility, keep the props object and read props.foo or create an explicit toRef instead of depending on the 3.5 transform.

You inherit Vue code using $ref and $computed from reactivity transform; how would you modernize it after the transform was removed from core?

I would migrate the code to explicit ref and computed contracts rather than preserve invisible assignment rewriting. - Reactivity transform was removed from Vue core in 3.4, so script code should use ref, computed, and .value while templates retain normal top-level ref unwrapping. - Use toRef or toRefs when a property link must survive destructuring, and pass refs or getters explicitly into composables. - Vue Macros can restore the syntax as an opt-in build transform, but that adds tooling and library-consumer constraints that explicit refs avoid.

How would you design the TypeScript public API of a generic Vue SFC such as a DataTable whose rows, selection events, and row slot share one item type?

Use an SFC generic when one type relationship spans props, emits, and slots while the runtime behavior remains the same for every item type. - Declare generic="T extends { id: string }" on script setup, type rows as T[], emit selected items as T, and expose item: T through a typed row slot. - Keep the public surface semantic and small, publish declarations, and run vue-tsc against consumer fixtures so inference failures are caught before release. - For a template ref to a generic component use ComponentExposed rather than InstanceType, and validate network data at runtime because TypeScript does not validate payloads.

You are building an accessible selectable list that products must render with different markup; when would you choose a composable, slots, or a headless component?

Choose the abstraction by who must own behavior, rendering, lifecycle, and accessibility guarantees. - Use a composable when consumers can safely own all markup and only need reusable selection, filtering, or keyboard state without another component boundary. - Use a headless component with scoped slots when one owner must coordinate focus, ARIA relationships, provide and inject context, and lifecycle while consumers render through readonly state and actions. - Use ordinary slots when the component's semantic structure is fixed and consumers only insert content, and do not let slot flexibility remove required labels, roles, or relationships.

A dashboard lazy-loads three widgets, two of which use async setup; how would you place defineAsyncComponent and Suspense boundaries?

I would make each boundary match the part of the dashboard that should reveal content or fallback as one user-visible unit. - Use defineAsyncComponent for code splitting and its local loading, timeout, retry, or error behavior when no parent Suspense owns that dependency. - Suspense coordinates async setup and suspensible async components under one default and fallback branch; independent widgets need nested boundaries so one slow request does not hide the whole dashboard. - Under Suspense, an async component's loading, error, delay, and timeout options are ignored unless suspensible is false, and errors still need onErrorCaptured or a dedicated error boundary with retry.

A workspace can open 40 report tabs. How does KeepAlive manage cached lifecycles, and how would you bound the cache?

Cache only views whose restorable local state is worth retaining, and put a measured upper bound on retained component instances. - Use include, exclude, and max with stable component names and keys; when max is exceeded, KeepAlive evicts the least recently used cached instance and unmounts it. - Pause sockets, observers, timers, and heavy third-party widgets in onDeactivated, restore them in onActivated, and keep final disposal in onUnmounted. - Move durable filters or drafts to Pinia or route state when retaining the entire DOM and component graph costs more than reconstructing the view.

Vue Developer interview questions

100 real questions with model answers and explanations for Senior Vue Developer candidates.

See a Vue Developer resume example →

Practice with flashcards

Spaced repetition · Hunter Pass

Questions

reactreactivityvue

Vue 3.5 changed the bookkeeping, not the application contract: reactive reads are tracked, writes invalidate subscribers, and scheduled effects run again.

Dependency and subscriber relationships use doubly linked lists with versioned links, making subscription cleanup and reuse cheaper.
A global version gives computed values a fast path when no reactive mutation has happened since their last evaluation.
Proxies still intercept object and collection operations, while refs perform equivalent tracking through value.
I use these details to explain profiles and stale updates, but product code must not depend on private Dep or effect fields.

Why interviewers ask this: The interviewer is checking whether the candidate knows the Vue 3.5 reactivity refactor without confusing private implementation details with the public API.

reactreactivitycomposition-api

I default to ref for replaceable values and use reactive for a cohesive object that stays behind one stable proxy.

A primitive, nullable DOM handle, or replaceable request result fits ref because assigning value is explicit and tracked.
A form with many fields updated in place fits reactive, but replacing the local proxy variable does not update consumers holding the old proxy.
Destructuring a reactive property into a plain variable loses its live connection, so I use toRef, toRefs, or a getter at that boundary.
For reusable composables, I accept refs or getters and normalize with toValue instead of forcing callers into one container type.

Why interviewers ask this: A strong answer connects ref and reactive to replacement, destructuring, and composable API design rather than treating them as interchangeable syntax.

vue

Vue records dependencies by raw target and operation key, so this expression subscribes to each reactive property read along the path.

Conceptually, a WeakMap maps each raw target to a Map whose keys point to dependency sets for active effects.
Reading state.user tracks the state target with key user, then reading name tracks the nested user target with key name.
Replacing state.user triggers the first dependency, while changing user.name triggers the second; changing an unrelated user field does not.
Iteration uses special dependencies, so adding or deleting keys can rerun Object.keys, for...in, Map key iteration, or array length consumers.

Why interviewers ask this: The interviewer is evaluating whether the candidate can reason from a concrete read to the exact target and key dependencies that Vue invalidates.

componentsreactivityvue

Vue queues most reactive jobs into one microtask, deduplicates them, and flushes them in a stable order instead of rendering after every write.

Parent component jobs run before child jobs, which avoids updating a child that the parent has already unmounted.
A default pre watcher runs after parent updates but before its owner's DOM patch, so its callback must not read the owner's final DOM.
I use flush: 'post' for DOM measurement after Vue patches, and nextTick when imperative code only needs to await the current flush.
I reserve flush: 'sync' for tiny invariants because it bypasses batching and can fire once per array mutation or loop iteration.

Why interviewers ask this: A strong answer distinguishes queue ordering, pre and post phases, nextTick, and the performance cost of synchronous watchers.

reactivityvue

A computed value caches its result and invalidates that cache when a tracked source changes, but it does not evaluate the getter again until value is read.

The first read runs the getter under the computed subscriber and records only dependencies touched by the active branch.
Source writes update dependency versions and mark the computed dirty, separating invalidation from recomputation.
On the next read, Vue can skip work through the global version fast path or verify dependency versions before rerunning the getter.
The getter should stay pure because side effects inside a lazy cached computation have surprising timing and cleanup semantics.

Why interviewers ask this: The interviewer is checking whether the candidate separates dependency invalidation, lazy recomputation, caching, and getter purity.

reactivityvueapi

I use watch when the source and callback contract must be explicit, and watchEffect when one synchronous function can discover its own reactive reads.

watch is lazy by default and provides new and old values; watchEffect runs immediately and tracks only reads made before the first await.
For a request, I create an AbortController per run and abort it before the watcher reruns or stops.
In Vue 3.5, onWatcherCleanup registers that invalidation cleanup but must be called during the synchronous watcher execution, not after await.
The callback onCleanup argument remains bound to the watcher and is useful when cleanup must be registered after asynchronous code.

Why interviewers ask this: A strong answer covers source control, asynchronous dependency tracking, stale request cancellation, and the synchronous constraint of onWatcherCleanup.

ownership

I create an effectScope when several watchers and computed values need one owner outside the lifecycle already provided by a component setup.

Effects created synchronously inside scope.run are captured, and scope.stop disposes them together.
Nested scopes stop with their parent, while effectScope(true) is detached and therefore needs an explicit long-lived owner.
A composable uses onScopeDispose for timers, subscriptions, and external resources tied to the current scope.
Effects created later in an asynchronous callback may miss the active scope, so I create them synchronously or retain and call their stop handles.

Why interviewers ask this: The interviewer is checking whether the candidate models watcher and resource ownership explicitly, especially outside component setup.

reactreactivityvue

I use shallowRef when Vue should react to replacing a top-level value but must not proxy or track its nested object graph.

It suits a large immutable snapshot, a third-party state object, or an editor instance whose internals have their own lifecycle.
Replacing snapshot.value notifies consumers, while mutating snapshot.value.items in place does not.
If an integration must mutate that object in place, triggerRef explicitly notifies consumers after the mutation.
Manual triggering weakens normal data-flow guarantees, so I keep it inside a narrow adapter and prefer replacement for application state.

Why interviewers ask this: A strong answer treats shallowRef as a deliberate reactivity boundary and triggerRef as a controlled escape hatch, not a general optimization.

Both APIs cross the proxy boundary, so I use them narrowly and never let raw and proxied versions become competing identities in domain state.

markRaw prevents the marked root object from being proxied, which is appropriate for a class instance or external widget owned by another library.
Its nested objects are not automatically protected when inserted elsewhere, so raw.nested and a proxied nested value can fail strict identity checks.
toRaw returns the original object for a temporary integration or inspection, but reads and writes through it bypass normal tracking and triggering.
For Map keys, caches, and equality checks, I normalize to one representation or use a stable domain ID instead of object identity.

Why interviewers ask this: The interviewer is evaluating whether the candidate understands shallow raw opt-outs, bypassed tracking, and proxy identity hazards.

vue

Stable keys preserve vnode identity during list changes, while compiler hints let the runtime inspect only the dynamic parts that can actually change.

The keyed diff first syncs matching prefixes and suffixes, then maps remaining new keys to locate reusable old nodes.
It unmounts missing nodes, mounts new ones, and uses a longest increasing subsequence to minimize DOM moves among retained nodes.
Unique domain IDs are valid keys; array indexes are unsafe when insertion, deletion, or sorting must preserve component state.
Patch flags identify dynamic text, class, style, props, and keyed fragments, while block dynamicChildren let Vue skip static descendants.

Why interviewers ask this: A strong answer connects key correctness, the keyed diff algorithm, DOM move minimization, and compiler-generated fast paths.

componentscomposablesownership

The scope that starts a reactive effect or external resource should own its disposal unless the resource is explicitly shared.

Per-call watchers, socket listeners, timers, and requests should register cleanup with onScopeDispose, including aborting in-flight work.
A shared socket needs a service-level owner with reference counting or an explicit dispose operation so one component cannot close it for every consumer.
A detached effectScope must expose a stop handle owned by an application or request boundary, and a repeated mount-unmount test should return listener and task counts to baseline.

Why interviewers ask this: The interviewer checks whether the candidate can assign concrete lifetimes to composable effects instead of assuming component unmount always cleans everything.

formscomponentsinjection

I would expose one typed context contract and keep its mutable implementation inside the provider.

Export a unique symbol typed as InjectionKey<ValidationContext> so provide and inject agree on state, commands, and return types without string-key collisions.
Provide readonly reactive state plus operations such as validateField, and make required consumers fail fast when inject returns undefined.
Use a default only when standalone behavior is genuinely valid, and create the provided service per application or SSR request when it contains mutable user state.

Why interviewers ask this: The interviewer evaluates type safety, mutation boundaries, missing-provider behavior, and request isolation in dependency injection.

componentsformsvue

I would make the parent the source of truth and use defineModel to express the prop and update event as one typed ref.

const page = defineModel<number>('page', { required: true }) compiles to a page prop and update:page event, so assigning page.value requests a parent update.
The parent binds v-model:page, while transient details such as focus and hover remain local because they do not need external coordination.
Separate page and pageSize models are clearer than mirrored local copies, but their defaults, update timing, and validation still belong in the public contract.

Why interviewers ask this: The interviewer checks whether defineModel simplifies a controlled contract without obscuring state ownership or creating duplicate state.

nlpforms

Read the model modifiers in a setter transformer and emit one normalized value while keeping the parent and child synchronized.

Destructure const [model, modifiers] = defineModel<string>() and let set inspect modifiers.trim or modifiers.capitalize before returning the emitted value.
Keep the transformer type-preserving and idempotent, and leave validation errors explicit rather than silently converting invalid domain values.
A child default can start model at a value while the parent's bound ref remains undefined, so initialize the parent, require the model, or omit the child default.

Why interviewers ask this: The interviewer checks knowledge of modifier-aware transformations and the documented defineModel default desynchronization edge case.

reactcomponentsreactivity

Vue 3.5 makes destructured defineProps bindings reactive, but a cross-version library should not rely on that behavior without setting its minimum version.

In Vue 3.5, the script setup compiler rewrites reads of a destructured prop to the underlying props property, and JavaScript destructuring syntax can supply defaults.
A watcher or composable should receive () => foo or a getter-based toRef, because passing foo directly supplies its current value rather than a reactive source.
The transform applies only to defineProps destructuring in the same script setup block; ordinary reactive-object destructuring can still lose the property link.
For Vue 3.4 compatibility, keep the props object and read props.foo or create an explicit toRef instead of depending on the 3.5 transform.

Why interviewers ask this: The interviewer evaluates version-aware use of compiler reactivity and correct reactive sources at watcher and composable boundaries.

reactreactivityvue

I would migrate the code to explicit ref and computed contracts rather than preserve invisible assignment rewriting.

Reactivity transform was removed from Vue core in 3.4, so script code should use ref, computed, and .value while templates retain normal top-level ref unwrapping.
Use toRef or toRefs when a property link must survive destructuring, and pass refs or getters explicitly into composables.
Vue Macros can restore the syntax as an opt-in build transform, but that adds tooling and library-consumer constraints that explicit refs avoid.

Why interviewers ask this: The interviewer checks whether the candidate understands the removal, can migrate semantics safely, and recognizes the cost of nonstandard compile-time syntax.

componentsvuetypescript

Use an SFC generic when one type relationship spans props, emits, and slots while the runtime behavior remains the same for every item type.

Declare generic="T extends { id: string }" on script setup, type rows as T[], emit selected items as T, and expose item: T through a typed row slot.
Keep the public surface semantic and small, publish declarations, and run vue-tsc against consumer fixtures so inference failures are caught before release.
For a template ref to a generic component use ComponentExposed rather than InstanceType, and validate network data at runtime because TypeScript does not validate payloads.

Why interviewers ask this: The interviewer checks whether generic SFC types preserve consumer inference without leaking implementation details or replacing runtime validation.

componentscomposables

Choose the abstraction by who must own behavior, rendering, lifecycle, and accessibility guarantees.

Use a composable when consumers can safely own all markup and only need reusable selection, filtering, or keyboard state without another component boundary.
Use a headless component with scoped slots when one owner must coordinate focus, ARIA relationships, provide and inject context, and lifecycle while consumers render through readonly state and actions.
Use ordinary slots when the component's semantic structure is fixed and consumers only insert content, and do not let slot flexibility remove required labels, roles, or relationships.

Why interviewers ask this: The interviewer evaluates whether the reuse primitive follows concrete ownership and accessibility requirements rather than stylistic preference.

reactcomposition-apiadvanced

I would make each boundary match the part of the dashboard that should reveal content or fallback as one user-visible unit.

Use defineAsyncComponent for code splitting and its local loading, timeout, retry, or error behavior when no parent Suspense owns that dependency.
Suspense coordinates async setup and suspensible async components under one default and fallback branch; independent widgets need nested boundaries so one slow request does not hide the whole dashboard.
Under Suspense, an async component's loading, error, delay, and timeout options are ignored unless suspensible is false, and errors still need onErrorCaptured or a dedicated error boundary with retry.

Why interviewers ask this: The interviewer checks whether async code loading, data readiness, fallback scope, and error handling are designed as separate concerns.

caching

Cache only views whose restorable local state is worth retaining, and put a measured upper bound on retained component instances.

Use include, exclude, and max with stable component names and keys; when max is exceeded, KeepAlive evicts the least recently used cached instance and unmounts it.
Pause sockets, observers, timers, and heavy third-party widgets in onDeactivated, restore them in onActivated, and keep final disposal in onUnmounted.
Move durable filters or drafts to Pinia or route state when retaining the entire DOM and component graph costs more than reconstructing the view.

Why interviewers ask this: The interviewer evaluates whether KeepAlive is treated as a bounded state-retention policy with deactivation-aware resource management.

Locked questions

21
A Nuxt 3 marketplace has a modal flag, a shareable filter for 12 categories, paginated products from an API, and an unsaved checkout draft. Where should each kind of state live?
nuxtapi
22
A Vue 3 back office has one 2,000-line Pinia store for customers, invoices, permissions, and UI dialogs. How would you define better store boundaries without creating dozens of tiny stores?
state-managementvue
23
A Pinia setup store supplies cart data during Nuxt SSR. What must be request-scoped, returned from the store, and hydrated on the client?
ssrcomposition-apistate-management
24
A component destructures const { total, addItem } = useCartStore(), and total stops updating after the first render. How do you fix it, and what should remain destructured normally?
componentsdestructuring
25
A Vue data grid can search 100,000 customer rows and update one row every second over WebSocket. How would you shape the Pinia state?
gridstate-managementvue
26
Store A reads Store B during setup, Store B reads Store A during setup, and SSR now fails depending on import order. How would you remove the cycle?
ssrcomposition-api
27
A typeahead Pinia action sends a request after 250 ms, but a slow response for 'vue' overwrites the newer result for 'vue 3'. How do you implement latest-wins behavior?
state-managementvue
28
Two browser tabs edit the same invoice at version 17, while the UI optimistically changes its status. How should the Pinia action handle rollback and a stale-write conflict?
state-managementlockingrollback
29
You need Pinia plugins for draft persistence and action telemetry across 15 stores in an SSR application. What would those plugins do and avoid?
ssrstate-management
30
How would you test a Pinia setup store that hydrates a 20-item cart from Nuxt SSR and then runs client-side actions?
ssrcomposition-apistate-management
31
You are designing a Nuxt 3 marketplace with 2,000 marketing and product pages, query-driven search, and an authenticated account area. Which rendering mode would you choose for each route group?
nuxtqueriesdesign
32
At 200 concurrent Nuxt SSR requests, authenticated user data is server-only while locale and theme must appear in the hydrated page. What belongs in event.context and useState?
hooksssrnuxt
33
A Nuxt 3 page renders a localized timestamp, a generated DOM id, and a mobile-specific branch. How would you make hydration deterministic?
domhydrationnuxt
34
Three Nuxt 3 components request the same paginated orders while filters can change quickly. How would you design useAsyncData or useFetch keys and deduplication?
componentsnuxtdesign
35
A Nuxt 3 SSR page receives a profile containing a Date, a Map, an internal token, and user-authored rich HTML. What would you serialize into the payload, and how would you prevent XSS?
htmlssrnuxt
36
A catalog has one million product URLs, 10,000 hot pages, a hard 15-minute freshness limit, and an origin regeneration budget of 20 requests per second. How would you configure Nuxt caching?
nuxtcachingconfig
37
A Nuxt 3 product page has an 80 ms hero query and a 1.5 second recommendations query, while the TTFB target is 200 ms. How would you use Suspense or streaming without delaying the critical page?
reactnuxtadvanced
38
A browser-only chart library accesses window during import and cannot SSR. How would you integrate it with Nuxt 3, and what does ClientOnly cost?
ssrnuxt
39
Users are global, but the primary PostgreSQL database is in eu-west-1, and a personalized Nuxt route makes three sequential queries. Would you render that route at edge locations?
databasepostgresqueries
40
A Nuxt 3 account page authenticates with an HttpOnly cookie and sits behind a CDN. How would you prevent one user's SSR HTML from being served to another user?
htmlssrnuxt
41
A Vue storefront passes Lighthouse locally but users report slow pages. How would you define and measure its Core Web Vitals targets?
web-vitalsvue
42
A Vue table updates every row when only the selected row changes. How would you profile and fix it?
vue
43
How would you virtualize a Vue grid with 100,000 variable-height rows while preserving scroll position and accessibility?
grida11yvue
44
A list has 5,000 expensive markdown previews while unrelated cursor state updates 60 times per second. When would v-memo help, and what must its dependencies contain?
dependencies
45
A Vue 3.5 form renders inputs with v-for and must focus one by item ID after sorting. How would you manage template refs without relying on ref-array order?
formscomponentsvue
46
A Vue SPA ships 1.2 MB of compressed JavaScript on its first route. How would you split it and keep the bundle from growing back?
vuejavascript
47
Design a Vue analytics dashboard with 10 widgets backed by different APIs, where one slow API must not block the page.
designvue
48
How would you design a Vue field-service form that must work offline and synchronize edits later?
formsvuedesign
49
Billing is owned by six engineers and releases weekly, while a 10-engineer catalog team releases daily; both use Vue 3.5 but have incompatible Pinia models. Would you split a microfrontend boundary between them?
state-managementvue
50
A Select component is used by four Vue applications; the next release adds async options and changes keyboard behavior. Which contracts and rollout rules keep consumers compatible?
componentsvueasync
51
After a release, 12 KPI cards stay at their opening values although an SSE message updates reactive dashboardState every 2 seconds; the release destructured activeUsers and errorRate from that object. How do you diagnose and fix it?
reactreactivitydestructuring
52
A shallowRef holds a 50,000-record search snapshot, but a worker patch changes 600 records and the result count remains 12,481; the code mutates snapshot.value.records and then assigns the same object back to snapshot.value. What do you do?
reactivitysnapshot
53
A computed value returns an object with rows and summary for a 300-row table; a 500 ms freshness tick invalidates it, and Vue DevTools records 120 table updates per minute although rows and totals do not change. How would you remove the wasted work?
reactivityvue
54
A watchEffect loads audit events for orgId and severity, but changing severity after an 80 ms token refresh does nothing while changing orgId refetches correctly. The effect reads severity only after await. How do you repair the incident?
incidentsasynctokens
55
Typing one space into a filter causes Vue's maximum recursive updates warning, one CPU core reaches 100%, and 37 API calls start before the page freezes; a deep watcher trims the filter by assigning a new filter object. How do you stop the loop?
reactivityvueapi
56
A route waits 300 ms for permissions and then creates a watcher inside a promise callback; after 20 visits, one settings change starts 20 identical requests even though every old component was unmounted. How do you fix the leak?
componentsreactivitypromises
57
Chrome heap usage grows from 72 MB to 382 MB after 20 navigations between a customer route and the dashboard, and each customer page owns a 15 MB row set. How would you find and close the retaining path?
data-structures
58
A KeepAlive wrapper caches 18 analytics views, each retaining two 8 MB datasets and a WebGL chart; after opening 12 tabs, heap reaches 480 MB and the browser reports lost graphics contexts. What would you change?
cachingdata-structures
59
Dragging a Vue split pane makes ResizeObserver fire about 120 callbacks per frame, one CPU core reaches 100%, and Chrome reports a ResizeObserver loop. The callback writes the width of the element it observes. How do you fix it?
vuecallbacks
60
A notification service creates effectScope(true) on every login; after four account switches, one event produces four toasts and four WebSocket subscriptions remain active. How would you redesign its lifecycle?
websockets
61
After a Nuxt release, hydration warnings appear on 18% of checkout visits, mobile users see the delivery panel change width, and some generated label targets stop matching their inputs. How do you handle the incident?
hydrationnuxtssr
62
A Nuxt pricing page logs hydration node mismatches on every browser, although its data is identical on server and client; conversion dropped 6% after a component changed from a span to a div inside a paragraph. What do you investigate and change?
componentshydrationnuxt
63
A team wrapped an entire 900 px analytics hero in ClientOnly to support one chart library; mobile CLS rose from 0.04 to 0.31 and LCP from 2.1 to 3.8 seconds. What is your incident response?
incidents
64
After two Nuxt dashboard widgets adopted useAsyncData, the orders API receives 2.2 requests per navigation and 3% of users see customer totals in the revenue widget. Both calls use the key dashboard. How do you diagnose and fix it?
decision-makingapinuxt
65
During a 300-request-per-second sale, 0.2% of Nuxt SSR responses briefly show another customer's cart count before hydration corrects it. The Pinia instance is exported from a server module. How do you respond?
hydrationssrstate-management
66
Operators switch warehouses twice within 600 ms, but the first inventory request sometimes finishes last and overwrites the selected warehouse; the wrong stock is shown in 4% of such sessions. How would you fix the Pinia action?
state-managementsessionswarehouse
67
Two support agents update the same order at version 52; one optimistic refund fails with 409 after a later address correction succeeds, and the current rollback restores the whole old order. How do you contain and redesign this flow?
lockingrollback
68
Returning users with a persisted compact Pinia navigation state get hydration warnings on 12% of Nuxt page views and CLS of 0.18, while new users do not. What is your diagnosis and durable fix?
hydrationstate-managementnuxt
69
Seven customers report seeing another company's billing summary for up to 45 seconds; CDN logs show HIT responses for authenticated Nuxt SSR pages and the cache key contains only the URL. What do you do?
ssrnuxtcaching
70
A Nuxt search page has a 180 ms results API and a 2.4 second insights API, yet production TTFB is 2.6 seconds despite a Suspense boundary; the CDN emits the response as one chunk. How do you restore the first-byte target?
reactnuxtadvanced
71
RUM shows INP p75 worsening from 180 ms to 420 ms immediately after a bulk-edit feature shipped. How would you isolate and fix the regression?
72
Selecting one row in a 500-row Vue table now rerenders all 500 rows and takes 210 ms. What would you change?
vue
73
A Vue form has 20,000 fields split across 40 sections; every keystroke rerenders all sections and INP p75 reaches 380 ms because the provider replaces one context object containing state and commands. How do you fix it?
formscomponentsvue
74
A customer route mounts 100,000 Vue list items, freezes for 9.4 seconds, and reaches 1.1 GB of heap. How would you make it usable?
vuedata-structures
75
A v-memo optimization shipped successfully, but changing currency leaves prices stale on some invoice rows. How would you debug and correct it?
optimization
76
After a reporting feature launched, compressed initial JavaScript grew by 40 percent and mobile LCP p75 moved from 2.1 seconds to 3.4 seconds. How would you reverse the regression?
javascript
77
A code-splitting refactor reduced total bytes but made first navigation to analytics 1.3 seconds slower through a request waterfall. How would you fix it?
methodologyrefactoring
78
A newly added support widget blocks the main thread for 360 ms and pushes checkout INP p75 from 190 ms to 310 ms. What is your production response?
concurrency
79
A live inventory screen becomes janky after 15 minutes as heap reaches 780 MB and major garbage collections pause for 180 ms. How would you address deep-reactivity memory pressure?
gcmemoryreact
80
A Nuxt product page release raises CLS p75 from 0.04 to 0.23 because the hero image, web font, and a late promotion all shift content. How would you fix and verify it?
nuxt
81
You must move a 200-component Vue 2 application used by 80,000 daily users to Vue 3 in six months, with no feature freeze and at most 15 minutes of rollback time. How would you use the migration build?
componentsvuemigrations
82
After the runtime reaches Vue 3, 80 Options API components still ship weekly across four teams. Product will fund only 20 percent migration capacity, so how would you introduce Composition API without a rewrite campaign?
componentscomposition-apioptions-api
83
A legacy app has 14 mixins used by 63 components, and production bugs come from three data and method name collisions plus hidden dependencies on Vue's deterministic but non-obvious merged hook order. How would you replace them while teams keep releasing?
componentshooksvue
84
Six teams share 24 Vuex modules, including dynamic modules and persistence plugins, but only three domains can migrate to Pinia this quarter. How would both stores coexist without two sources of truth?
state-management
85
Your Vue 2 codebase contains 42 template filters, 18 hand-written render components, and 12 functional components, and checkout DOM output must remain identical during Vue 3 migration. What sequence would you choose?
componentsdomvue
86
An abandoned Vue 2 scheduling plugin powers 35 screens and 28 percent of revenue, uses Vue.prototype and the old VNode API, and has no Vue 3 release. A full replacement needs four months, but migration must start in six weeks. What do you do?
vueapimigrations
87
A 120,000-line legacy Vue application has 90 JavaScript SFCs, six developers, and a three-sprint deadline for new features. How would you roll out TypeScript without stopping delivery or hiding everything behind any?
typescriptjavascriptestimation
88
You must migrate a Nuxt 2 marketplace with 300 routes, 12 modules, SSR authentication, and one million visits per day to Nuxt 3, but SEO traffic cannot fall more than 1 percent. How would you stage it?
ssrnuxtauth
89
During a 200-component Vue 2 to Vue 3 migration, the old Jest and Vue Test Utils 1 suite has 1,600 tests but relies heavily on implementation snapshots. How would you prove parity without freezing Vue 2 internals?
jestsnapshotcomponents
90
A Vue 3 migration release will reach 600,000 sessions per day across web and mobile browsers. Define the canary, success metrics, and automatic rollback policy you would approve.
monitoringrollbackmigrations
91
An engineer adds 12 deep watchers to synchronize a six-step Vue quote form; typing one field triggers 18 validations and release is in five days. How do you mentor them while still shipping safely?
formsreactivityvue
92
During review of a shared Vue DateField, you notice that modelValue changes from an ISO string to a Date object; four applications have 63 call sites, and the payroll app cannot migrate for three weeks. What action do you take?
vue
93
After a Vue Select is virtualized for 400 options, keyboard users can open it but ArrowDown moves to an unmounted option and Enter no longer selects; checkout completion drops 6 percent for keyboard sessions. How do you handle the regression?
soft-skillsvirtualizationsessions
94
One of 80 Nuxt SSR tests fails in 6 percent of CI runs across eight workers, showing the currency from another test, but passes locally. The team wants retries before tomorrow's release. What do you do?
ssrnuxttesting
95
A confirmation dialog is teleported from inside another Vue dialog; Escape closes both, the background remains focusable, and focus returns to the wrong element in 7% of keyboard sessions. How do you fix it?
advancedvuesessions
96
A Vue shell deploys remote contract version 4 while the billing microfrontend still exposes version 3; cached remote manifests also point to a deleted chunk, so 7 percent of billing sessions fail to mount. What is your incident and compatibility plan?
incidentsdeploymentcaching
97
A Vue authentication plugin used by six SSR applications releases version 4.2.1 for a reachable CVSS 8.8 flaw, but the patch changes its install options and injected session key; security requires production remediation within 24 hours. How do you patch it?
ssrvueauth
98
A Vue checkout serves 120,000 sessions per day, telemetry must average under 1 KB per session, and legal forbids raw URLs or form values. Which frontend SLO and alerts do you choose?
formsvuesessions
99
Two senior engineers disagree between a deeply reactive Pinia graph and immutable shallowRef snapshots for a 5,000-node Vue workflow editor; beta is in seven days, drag p95 must stay below 16 ms, and undo must retain 100 steps. A six-hour prototype measures 28 ms and 310 MB versus 11 ms and 190 MB. How do you close the decision?
reactreactivitystate-management
100
A deploy removes old async chunks while cached HTML still references them; route-mount failures reach 28% of sessions, detection takes 14 minutes, and rollback takes 31 minutes. How do you run the postmortem?
deploymentrollbackcaching

Questions

1What changed in Vue 3.5's reactivity internals, and what remains the useful mental model?

2In production Composition API code, how do you choose between ref and reactive?

3Explain what Vue tracks when an effect reads state.user.name and which writes can trigger it.

4How does Vue batch component updates and watcher callbacks, and when would you change flush timing?

5How does computed achieve lazy evaluation and correct invalidation in Vue 3.5?

6How do watch and watchEffect differ, and how do you cancel stale work with Vue 3.5 cleanup APIs?

7When do you create an effectScope, and what lifecycle mistakes does it prevent?

8When are shallowRef and triggerRef better than deep Vue reactivity?

9What identity problems can markRaw and toRaw introduce, and how do you avoid them?

10How do stable keys and compiler patch flags reduce Vue's update work for a dynamic list?

11A useRealtimeOrders composable is called from route components and from a detached effectScope; how should it define ownership and cleanup?

12A deeply nested form needs a locale-aware validation service; how would you design provide and inject with a typed InjectionKey?

13How would you implement a controlled pagination component with defineModel in Vue 3.4 or 3.5?

14A reusable text input supports trim and capitalize v-model modifiers; how should defineModel transformers work, and what default-value risk must you handle?

15A component library supports Vue 3.4 and 3.5, and a destructured prop must drive a watcher; how do reactive props destructuring rules affect the implementation?

16You inherit Vue code using $ref and $computed from reactivity transform; how would you modernize it after the transform was removed from core?

17How would you design the TypeScript public API of a generic Vue SFC such as a DataTable whose rows, selection events, and row slot share one item type?

18You are building an accessible selectable list that products must render with different markup; when would you choose a composable, slots, or a headless component?

19A dashboard lazy-loads three widgets, two of which use async setup; how would you place defineAsyncComponent and Suspense boundaries?

20A workspace can open 40 report tabs. How does KeepAlive manage cached lifecycles, and how would you bound the cache?

Locked questions