Vue Prep Path: Reactivity, Rendering, State

Reactivity fundamentals (Vue 3)

Why it’s asked: This is the quickest way to see whether you truly understand refs, proxies, and tracking boundaries—or are just debugging by trial and error.

Typical prompts:

• Explain ref vs reactive and when to choose each.
• Fix a bug where adding a property does not trigger an update.
• Use shallowRef for external or large immutable data.
• Describe proxy vs raw objects and what Vue tracks.

What good looks like: You can say exactly what Vue tracks, when rerenders happen, and where shallow/deep assumptions break.

Computed vs watchers

Why it’s asked: This reveals whether you separate derived state from side effects and can control timing/cleanup with intent.

Typical prompts:

• Compare computed vs watch vs watchEffect with a real scenario.
• Show when watchEffect is a better fit than watch.
• Explain watcher flush timing and why it matters.
• Use cleanup in watchers to cancel async work on re-run.

What good looks like: You pick the right tool for the job and explain timing and cleanup without vague language.

Rendering and update timing

Why it’s asked: Vue batches updates, and timing bugs expose whether you understand when DOM is actually committed.

Typical prompts:

• Explain what nextTick() does and why DOM updates are batched.
• Diagnose why template change is not reflected immediately.
• Compare lifecycle hook order with watcher execution.
• Fix timing issues with nextTick or flush strategy.

What good looks like: You can describe the update pipeline in plain terms and choose the right fix without cargo-culting nextTick.

Component communication

Why it’s asked: Real apps are component networks, so this checks whether your data flow stays understandable as the tree grows.

Typical prompts:

• Use props and custom emits for parent-child communication.
• Implement scoped slots for flexible rendering.
• Use provide/inject for context-like sharing.
• Extract shared behavior into composables.

What good looks like: You keep ownership clear by default and can justify when slots or provide/inject are worth the complexity.

SFC and Composition API patterns

Why it’s asked: This checks whether you can write modern Vue 3 code that teams can actually maintain.

Typical prompts:

• Refactor Options API code into <script setup>.
• Use defineProps/defineEmits with strong typing.
• Write and integrate a reusable composable.
• Explain ref exposure between <script setup> and template.

What good looks like: You can structure Composition API code cleanly and explain trade-offs without hiding behind syntax.

Vue Router (navigation)

Why it’s asked: Routing is architecture in disguise, so this checks auth flow, route boundaries, and navigation behavior under real constraints.

Typical prompts:

• Protect routes with guards and meta checks.
• Lazy-load route components with dynamic import().
• Set up nested routes or named views.
• Redirect or cancel navigation based on auth state.

What good looks like: You can explain guard flow clearly and connect routing decisions to UX and load behavior.

State management (Pinia)

Why it’s asked: This tests state-boundary judgment: what stays local, what becomes shared, and why.

Typical prompts:

• Create a Pinia store with defineStore for shared state.
• Explain when state should move to store vs stay local.
• Compare Pinia and Vuex at practical level.
• Use Pinia with Composition API and type-friendly patterns.

What good looks like: You justify store boundaries with ownership and lifetime, not habit.

Performance and optimization

Why it’s asked: This separates “works on my machine” from “stays fast in production.”

Typical prompts:

• Explain why stable unique keys matter in v-for diffing.
• Use v-once or v-memo to skip static subtrees.
• Lazy-load components/routes to reduce initial bundle.
• Virtualize large lists or use shallowRef for big immutable data.

What good looks like: You identify the actual bottleneck first (render churn, list identity, bundle size) and apply targeted fixes.

Testing (component level)

Why it’s asked: This verifies whether you can prove behavior, not just produce passing snapshots.

Typical prompts:

• Mount component and simulate interaction with Vue Test Utils/Vitest.
• Assert emitted events, props handling, and slot rendering.
• Explain unit vs component vs E2E test boundaries.
• Explain how to test reactive composables.

What good looks like: You test observable outcomes and choose depth based on risk, not test framework defaults.

Reactivity fundamentals

Why they ask it: Reactivity is Vue’s core; weak model clarity here causes superstition-driven debugging everywhere else.

Common trivia questions:

• What is the difference between ref() and reactive()?
• What is shallowRef, and when would you use it?
• Given a large immutable state object, when should you use shallowRef?
• Why did adding a new property not trigger a view update?
• How does Vue 3 proxy the original object?
• How does shallowRef change update behavior for nested mutations?
• Why is comparing raw objects with proxies risky in reactive logic?

60-second answer skeleton:

• ref() is a reactive wrapper, great for primitives; reactive() creates a deep Proxy for objects.
• Templates unwrap refs automatically, but JavaScript code still needs .value.
• shallowRef tracks only top-level replacement, not deep nested mutation.
• Vue tracks through proxy get/set, not by mutating raw object assumptions.
• For missing-key update issues, initialize expected shape up front.

Common traps:

• Forgetting .value in JavaScript while relying on template unwrapping.
• Using reactive() for primitives.
• Assuming reactive() returns the raw original object.
• Assuming shallowRef tracks deep nested changes.
• Mixing proxy and raw objects in equality-dependent logic.

How to practice: Build one tiny component that switches between ref, reactive, and shallowRef, then predict which mutations trigger rerender.

• Vue reactivity fundamentals trivia
• ref vs reactive trivia
• Large immutable object handling coding

Computed vs watchers

Why they ask it: Interviewers use this to test whether you can separate derived state from side effects, and whether you handle timing/cleanup correctly.

Common trivia questions:

• When should you use computed vs watch vs watchEffect?
• When is watchEffect better than watch, and when is it not?
• What is watcher flush timing and why does it matter?
• How do you write a watcher that reacts synchronously?
• How do you clean up long-running effects started in watch/watchEffect?

60-second answer skeleton:

• Use computed for derived values and caching.
• Use watch for explicit sources and side effects like async work.
• Use watchEffect for automatic dependency collection when explicit source wiring is noisy.
• Default watcher timing is not post-DOM; choose flush mode intentionally.
• Always add cleanup for async/timer/subscription side effects.

Common traps:

• Using watch where computed is the cleaner model.
• Assuming DOM is already updated in default watcher callbacks.
• Expecting old/new values in watchEffect automatically.
• Forgetting cleanup and creating duplicated effects.

How to practice: Implement one feature with computed + watch + watchEffect versions, then explain why only one is the right fit.

• computed vs watch trivia
• watch vs watchEffect trivia
• Async side-effect drill coding

Rendering and lifecycle timing

Why they ask it: Batched updates make timing bugs common; this checks whether you can reason about render and DOM commit points.

Common trivia questions:

• What does nextTick() do, and when is it required?
• What happens under the hood when you await nextTick()?
• What is the update-order relationship between hooks and watcher callbacks?
• When would you prefer onUpdated over nextTick(), or vice versa?

60-second answer skeleton:

• Reactive state changes schedule batched updates, they do not patch DOM instantly.
• nextTick() waits until Vue flushes pending DOM updates.
• Use it for DOM reads/focus/measure after state-driven render.
• onUpdated is hook-based post-update lifecycle; nextTick is an explicit await point in logic.

Common traps:

• Reading DOM immediately after assignment and trusting stale values.
• Assuming child update order without verifying component tree flow.
• Mixing lifecycle and watcher timing models inconsistently.

How to practice: Implement “show input then focus it” twice: once with nextTick(), once via watcher timing configuration.

• nextTick timing trivia
• Lifecycle hook order trivia
• Focus-after-render UI drill coding

Component communication (props, emits, slots, provide/inject, composables)

Why they ask it: This reveals how you design maintainable data flow in real component networks.

Common trivia questions:

• How do props and emits work together?
• How do you implement custom v-model with prop + emit conventions?
• What are slots and scoped slots used for?
• When is provide/inject appropriate?
• What is a composable and how is it consumed safely?

60-second answer skeleton:

• Props go down, emits go up; keep ownership boundaries explicit.
• Custom v-model follows modelValue + update:modelValue convention.
• Slots let parent provide markup; scoped slots let child expose slot props.
• provide/inject is useful for deep context, not default state management.
• Composables package reusable stateful logic under setup().

Common traps:

• Assuming emitted events bubble through arbitrary ancestor chains.
• Confusing slot direction and ownership responsibilities.
• Overusing provide/inject for routine state flow.
• Skipping emits declaration and losing API clarity.

How to practice: Build one child input with custom v-model and one slot-powered table row renderer, then explain boundary choices.

• Props flow and mutation traps trivia
• Slots and scoped slots trivia
• Provide/inject usage trivia
• Reusable communication drill coding

SFC and <script setup> patterns

Why they ask it: Vue 3 teams expect idiomatic <script setup> and composable usage, not legacy-only syntax comfort.

Common trivia questions:

• Why is <script setup> recommended in Vue 3 codebases?
• How do defineProps and defineEmits work?
• How do you strongly type props and emits?
• How do you structure reusable components and composables?
• What architectural patterns keep component libraries maintainable?

60-second answer skeleton:

• <script setup> compiles to setup() and exposes top-level bindings directly to template.
• defineProps/defineEmits are compiler macros with strong type inference support.
• Reuse favors focused components + slot extension points + composables for behavior.
• Library design should prefer stable conventions over prop-soup abstractions.

Common traps:

• Treating <script setup> as only cosmetic syntax.
• Forgetting emit declarations for component contracts.
• Over-abstracting too early and creating brittle APIs.

How to practice: Refactor one Options-style component to <script setup> with typed props/emits and extract one composable.

• SFC structure patterns trivia
• Composition API patterns trivia
• Refactor drill coding

Vue Router fast probes

Why they ask it: Routing combines architecture, UX, and performance, so guard/lazy patterns are high-signal interview checks.

Common trivia questions:

• What guard types exist and when do you use them?
• How do you handle async auth checks in global guards?
• How do you protect routes with redirect safety?
• How do you lazy-load route components and chunk them intentionally?
• How do dynamic params update in reused components?

60-second answer skeleton:

• Guards control navigation decisions at global, per-route, and in-component scopes.
• Use return-based guard flow in Vue Router 4, not legacy next()-only habits.
• Lazy-load routes with dynamic import() to reduce initial bundle.
• Dynamic params often update existing component instance, so react to param changes explicitly.

Common traps:

• Creating infinite redirect loops in auth guard logic.
• Static-importing route components while expecting code-splitting.
• Assuming param changes always remount component.

How to practice: Implement auth guard + dynamic /user/:id route, then navigate across IDs and explain update/remount behavior.

• Vue Router basics trivia
• Route architecture trade-offs trivia
• Routing-flavored coding drill coding

State management (Pinia / Vuex) probes

Why they ask it: Stores are where architecture discipline shows up fast, especially around boundary decisions and long-lived state.

Common trivia questions:

• How does Pinia differ from Vuex in practical day-to-day usage?
• When should state stay local vs move into Pinia?
• How do you define and consume a Pinia store safely?
• How do you migrate a Vuex module toward Pinia patterns?
• How do you test stores in isolation?

60-second answer skeleton:

• Pinia is the modern default for Vue 3 with simpler API and stronger TS ergonomics.
• Keep state local unless shared lifetime or cross-route ownership justifies store.
• Use defineStore + clear action boundaries; avoid global-state dumping.
• Testing should validate store behavior independently of component internals.

Common traps:

• Moving trivial local state into global store for convenience.
• Carrying Vuex-era ceremony into Pinia and increasing noise.
• Forgetting plugin setup and blaming missing store context.

How to practice: Implement the same small feature with local state and with Pinia-style store boundary reasoning, then justify your choice.

• Store fundamentals (Vuex baseline) trivia
• Local vs global state boundaries trivia
• State-oriented coding drill coding

Performance and testing fast probes

Why they ask it: Senior readiness depends on shipping behavior that stays fast and testable as the component tree grows.

Common trivia questions:

• Why are stable keys critical in v-for lists?
• How do unstable props trigger avoidable child updates?
• How do v-once/v-memo and lazy loading help practical performance?
• What should component tests assert first (DOM/events/props)?
• How do you test composables without template-level coupling?

60-second answer skeleton:

• Stable keys preserve identity and prevent DOM reuse bugs in dynamic lists.
• Keep props stable and avoid fresh object literals each render where possible.
• Use code-splitting and memo/static directives intentionally, not reflexively.
• Tests should assert observable behavior (DOM + events), then deeper integration only when risk requires.

Common traps:

• Using index as key in reorderable lists.
• Static imports that defeat lazy-loading intent.
• Snapshot-only tests that fail noisily on harmless markup shifts.
• Testing internals over user-observable behavior.

How to practice: Break a large list with bad keys and unstable props, then fix it and add a small test set for emits + DOM updates.

• v-for key behavior trivia
• Vue rendering and diffing trivia
• List and interaction drill coding

1) Custom input with two-way binding (v-model)

Prompt template: Given a base input component, implement support for v-model so parents can use <BaseInput v-model="text" /> and keep both sides in sync.

What they’re testing: Component API design, modelValue/update:modelValue contract understanding, and clean reactive wiring.

What good looks like: props.modelValue drives value, input events emit update:modelValue, and empty/clear behavior is handled intentionally.

Common pitfalls:

• Emitting wrong event names instead of update:modelValue.
• Skipping emits declaration and losing API clarity.
• Using internal v-model without explicit sync to modelValue.
• Mixing template ref unwrapping with missing .value usage in script.

Variation (easy / medium / hard): easy: basic text sync / medium: validation and maxLength / hard: multiple v-model bindings and modifiers.

• v-model syntax expansion trivia
• emits declaration and event contracts trivia
• Contact form starter coding

2) To-do list (add/delete items with reactivity)

Prompt template: Build a todo list with add/delete actions, list rendering via v-for + :key, and input clearing after item creation.

What they’re testing: Reactive collection handling, event wiring, key identity discipline, and baseline UI transitions.

What good looks like: Task state is reactive, each item has stable unique ID keys, empty-input rules are explicit, and input reset behavior is deterministic.

Common pitfalls:

• Using array index as :key and causing identity reuse bugs.
• Forgetting to clear input after submit.
• Mutating non-reactive values and expecting rerender.
• Injecting raw HTML for task text instead of standard safe text rendering.

Variation (easy / medium / hard): easy: add/remove only / medium: persistence with local storage or mock API / hard: edit + active/completed filters.

• Todo list coding drill coding
• v-for key correctness trivia

3) Tabs component with dynamic panels (slots/scoped slots)

Prompt template: Implement a Tabs component where active state is managed internally, titles come from props, and panel rendering is customized with slots.

What they’re testing: Component composition, conditional rendering, slot/scoped-slot understanding, and clean event surface design.

What good looks like: State model stays minimal (activeIndex plus derived active data), slot APIs remain clear, and tab changes emit stable events.

Common pitfalls:

• Missing keys in tab lists.
• Incorrect scoped-slot contract wiring.
• Forgetting to emit active-tab change events.
• Overengineering with dynamic component switching when simple branching is enough.

Variation (easy / medium / hard): easy: fixed slots / medium: prop-driven titles + slot content / hard: keyboard navigation with ARIA semantics.

• Tabs switcher coding drill coding
• Slots and scoped slots trivia

4) Form with validation plus API submission

Prompt template: Build a contact-style form with required and email rules, async submit flow, loading/error states, and controlled post-submit behavior.

What they’re testing: Reactive form state design, validation strategy (computed vs watch), async handling, and UX-state clarity.

What good looks like: Validation logic is centralized, submission uses @submit.prevent with explicit loading/error states, and success/failure outcomes are easy to reason about.

Common pitfalls:

• Missing @submit.prevent and triggering browser default submit.
• Ignoring rejected promises and hiding failure states.
• Scattering validation checks across handlers.
• Using watchers for pure derived validation that belongs in computed.

Variation (easy / medium / hard): easy: basic submit feedback / medium: inline validation errors and disabled submit / hard: field-level async validation plus store action integration.

• Contact form starter coding
• Multi-step form drill coding
• computed vs watchers trivia

5) Protected route flow (Vue Router guard)

Prompt template: Protect a dashboard route so unauthenticated users are redirected to login, and explain both synchronous and asynchronous auth-check behavior.

What they’re testing: Router guard mechanics, redirect correctness, async navigation control, and architecture-level flow reasoning.

What good looks like: Guard returns clear redirect decisions, login-loop cases are handled, and async auth checks are awaited intentionally.

Common pitfalls:

• Infinite redirect loops caused by missing route exemptions.
• Async auth checks not awaited, leading to flaky navigation outcomes.
• Mixing old next()-style and return-based guard patterns inconsistently.

Variation (easy / medium / hard): easy: sync boolean guard / medium: async guard decision / hard: per-route guard composition with route-meta policy.

• Vue Router navigation trivia
• Architecture trade-off framing trivia
• Router-focused trivia list list

6) Global state with store boundaries (Pinia/Vuex style)

Prompt template: Create shared store state (for example cart or counter), wire add/remove actions, and consume it across components without over-globalizing local UI state.

What they’re testing: State-boundary judgment, cross-component reactivity, and predictable store action design.

What good looks like: Store shape is explicit, mutations/actions are intentional, derived values are exposed cleanly, and local-only state remains local.

Common pitfalls:

• Dumping all state into global store.
• Carrying mutation ceremony patterns when simpler store actions suffice.
• Using store APIs inconsistently across components.

Variation (easy / medium / hard): easy: shared counter store / medium: cart with quantities and totals / hard: async store actions with error states.

• Store fundamentals trivia
• Shopping cart coding drill coding
• Transfer-list state drill coding

7) Data-fetching list component (API integration)

Prompt template: Fetch data on mount, render with v-for + keys, and handle loading/error/empty states with predictable UI transitions.

What they’re testing: Async lifecycle flow, reactive assignment correctness, list identity, and recovery-path handling.

What good looks like: State clearly separates loading/error/items, fetch updates reactive containers correctly, and UI transitions remain stable across retry and empty paths.

Common pitfalls:

• Skipping async error paths and leaving silent failures.
• Assigning response data to non-reactive variables.
• Missing keys in list rendering.
• Ignoring unmount-during-fetch implications in longer flows.

Variation (easy / medium / hard): easy: fetch on mount / medium: filter + pagination / hard: route-param-driven detail loading with retry strategy.

• Filterable user list coding
• Paginated table coding
• Debounced search coding

8) Pattern hygiene: keys and prop stability to prevent rerenders

Prompt template: Given a parent list and child rows, remove identity glitches and unnecessary updates by stabilizing keys and prop shapes.

What they’re testing: Identity modeling with keys, practical rerender reasoning, and targeted optimization discipline.

What good looks like: Stable unique IDs are used for keys, child props are kept narrow/stable, and optimizations are tied to measured symptoms.

Common pitfalls:

• Index keys in reorderable lists causing row state jumps.
• Passing fresh object literals to every child on each rerender.
• Applying optimizations without identifying real hotspots first.

Variation (easy / medium / hard): easy: key fixes / medium: prop-shape stabilization / hard: selective memoization strategy.

• v-for key behavior trivia
• Virtual DOM diffing model trivia
• Dynamic table drill coding

Signal 1: You clarify scope and state transitions before coding

What they’re evaluating: Can you remove ambiguity quickly and prevent late rewrites?

What good looks like:

• You ask focused questions about data shape, loading/error UX, and event outcomes before opening implementation details.
• You restate the flow as explicit states and transitions, then ship minimal behavior first.

Red flags:

• Coding immediately and discovering requirements mid-way.
• Long requirement discussion with no concrete implementation plan.

Signal 2: You apply Vue reactivity correctly (ref/reactive/shallowRef)

What they’re evaluating: Do you understand what Vue is tracking and why updates fire or fail?

What good looks like:

• You choose ref vs reactive intentionally, and use shallowRef only when top-level replacement is part of the design.
• You explain proxy behavior and avoid mixing raw objects and proxies in logic that depends on identity.

Red flags:

• Treating reactivity as magic and patching symptoms with random rewrites.
• Nested mutation bugs caused by incorrect shallow/deep tracking assumptions.

Signal 3: You show computed/watch judgment instead of API memorization

What they’re evaluating: Can you separate derived state from side effects and choose timing deliberately?

What good looks like:

• You use computed for pure derivation and watch/watchEffect for side effects with clear cleanup behavior.
• You justify watcher flush mode based on whether logic needs pre-update or post-update DOM context.

Red flags:

• Using watch for everything, including pure derivations.
• Side effects with no cleanup, causing duplicated async work and stale updates.

Signal 4: You handle update timing and nextTick with intent

What they’re evaluating: Can you reason about render scheduling rather than guessing DOM timing?

What good looks like:

• You explain that state mutation schedules updates, then use nextTick only when DOM-dependent logic truly requires committed DOM.
• You distinguish lifecycle hooks from surgical async timing points and pick one based on required behavior.

Red flags:

• Reading DOM immediately after state writes and trusting stale output.
• Adding nextTick everywhere instead of fixing the render/event model.

Signal 5: You keep component boundaries and composables clean

What they’re evaluating: Do you design reusable components without turning APIs into prop/event soup?

What good looks like:

• You keep ownership clear: props down, emits up, slots for structured customization, composables for shared behavior.
• You explain why provide/inject is a context tool, not a default replacement for explicit component contracts.

Red flags:

• Overusing provide/inject for everyday state flow.
• Extracting composables too early without stable boundaries.

Signal 6: You design router flow that stays correct under async auth

What they’re evaluating: Can you implement navigation rules that are reliable and user-safe?

What good looks like:

• You use guard returns consistently, prevent redirect loops, and describe async auth checks without racing navigation.
• You connect routing choices to UX and bundle behavior, including lazy route loading trade-offs.

Red flags:

• Mixing guard styles inconsistently and producing flaky redirects.
• Guard logic that breaks on repeated navigations or login transitions.

Signal 7: You choose state-management and perf strategy with evidence

What they’re evaluating: Can you pick local state vs store boundaries and optimize where it matters?

What good looks like:

• You keep local UI state local, move long-lived shared ownership into store only when justified, and explain that boundary clearly.
• You fix measurable hotspots first: stable keys, prop-shape discipline, and targeted list/render optimizations.

Red flags:

• Globalizing trivial local state and increasing complexity without benefit.
• Applying optimization directives without identifying real bottlenecks.

Reactivity core and ref/reactive traps

What to review: Review what Vue tracks, when updates fire, and where shallow/deep assumptions cause bugs.

Micro-drills:

• Explain ref vs reactive in 60 seconds with one concrete bug example.
• State when shallowRef is valid before writing code.
• Predict one nested-mutation behavior and verify.

Practice items:

• What is the Vue reactivity system and how does it work internally?vue-reactivity-system
• ref vs reactive in Vue: what’s the real difference, when should you use each, and what are the common reactivity traps?vue-ref-vs-reactive-difference-traps
• Todo List (Refs + List Rendering)vue-todo-list

Computed vs watch/watchEffect judgment

What to review: Review derived-state vs side-effect boundaries and cleanup decisions under async flow.

Micro-drills:

• Classify one prompt as computed-first or watch-first before coding.
• Explain one watchEffect pitfall and how to avoid loops.
• State one cleanup strategy for stale async results.

Practice items:

• Computed vs watch in Vue: derived state (cached) vs side effects (imperative)vue-computed-vs-watchers
• watch vs watchEffect in Vue: what’s the difference, when does each run, and how can you accidentally create infinite loops?vue-watch-vs-watcheffect-differences-infinite-loops
• Vue Debounced Search with Fake APIvue-debounced-search

Update timing, lifecycle, and DOM commit points

What to review: Review when nextTick is required and how lifecycle timing affects DOM-safe operations.

Micro-drills:

• Predict DOM value before/after nextTick in one state change flow.
• Explain where lifecycle hooks run relative to update commits.
• Implement one focus-after-render interaction.

Practice items:

• What does nextTick() do in Vue, and why are DOM measurements wrong immediately after a state change?vue-nexttick-dom-update-queue
• What are lifecycle hooks in Vue and when are they used?vue-lifecycle-hooks
• Vue Tabs / Multi-View Switchervue-tabs-switcher

Component communication and boundary hygiene

What to review: Review props/emits contracts, slot usage, and avoiding mutation-driven coupling.

Micro-drills:

• Explain props-down/emits-up with one anti-pattern example.
• Describe when scoped slots are better than prop expansion.
• Patch one prop-mutation bug by moving ownership up.

Practice items:

• What breaks if a child mutates a prop directly?vue-child-mutates-prop-directly
• Explain Slots in Vue: default vs named vs scoped slots — and how slot props enable child-to-parent data flowvue-slots-default-named-scoped-slot-props
• Transfer List (Move Selected Items Between Two Lists)vue-transfer-list

Router flow and navigation decisions

What to review: Review route navigation mechanics, guard reasoning, and route-architecture trade-offs.

Micro-drills:

• Explain one guard path including redirect and loop prevention.
• Describe one dynamic-param update scenario and expected component behavior.
• State one lazy-route benefit and one caveat.

Practice items:

• What is the Vue Router and how is it used for navigation?vue-router-navigation
• What architectural decisions are made when creating a Vue project, and how do they affect scalability?vue-architecture-decisions-scalability

Store boundaries and shared-state discipline

What to review: Review what should stay local vs shared, and how to keep state updates predictable.

Micro-drills:

• Decide local vs global ownership for one prompt before coding.
• Explain one store action flow and resulting UI update path.
• Name one cost of over-globalizing trivial state.

Practice items:

• What is the purpose of Vuex, and how does it help manage state in large applications?vuex-state-management
• Vue Shopping Cart Minivue-shopping-cart

Performance and list-identity reliability

What to review: Review key stability, diffing behavior, and practical rerender-cost discipline.

Micro-drills:

• Explain why index keys fail in reorder scenarios.
• Predict one bad-key UI bug before running the example.
• Apply one list optimization and validate behavior still matches requirements.

Practice items:

• Why are keys critical in v-for? What exactly breaks when you use array index as a key?vue-v-for-keys-why-not-index
• How does Vue’s virtual DOM and diffing algorithm optimize updates?vue-virtual-dom-diffing
• Vue Filterable / Searchable User Listvue-filterable-user-list