Vue Interview Questions and Answers

Sample questions

A few questions from each level with the correct answer and an explanation.

Vue · Junior

1. What is Vue?

   Correct answer: A progressive JavaScript framework for building UIs that can be adopted incrementally

   "Progressive" means you can start by enhancing a single page with Vue and grow to a full SPA with routing (Vue Router), state management (Pinia) and SSR (Nuxt). The core library focuses on the view layer and reactivity.

2. What is the recommended way to scaffold a new Vue project?

   Correct answer: npm create vue@latest

   create-vue sets up a Vite-based project and optionally adds TypeScript, Vue Router, Pinia, Vitest, ESLint and end-to-end testing. The old Vue CLI (webpack-based) is in maintenance mode.

3. What is the difference between the Options API and the Composition API?

   Correct answer: Options API groups code by option type (data, methods); Composition API groups it by feature using imported functions

   Both are supported in Vue 3. The Composition API (usually via <script setup>) makes logic reuse with composables and TypeScript inference easier; the Options API is still fine for simpler components.

4. What does {{ message }} do in a Vue template?

   Correct answer: Text interpolation: renders the value as escaped text and updates it when it changes

   Mustache syntax outputs plain text, so it is safe from XSS. To render HTML you need v-html, which should never receive untrusted content.

Vue · Middle

1. How does watchEffect differ from watch?

   Correct answer: watchEffect runs immediately and tracks whatever it reads; watch is lazy, has explicit sources and gives old and new values

   watchEffect is concise when the effect uses the same state it depends on. watch gives precise control: only listed sources trigger it, and it can be immediate or once.

2. What does { deep: true } do on a watcher?

   Correct answer: Triggers the callback on nested mutations inside the watched object, at the cost of traversing it

   Watching a reactive object directly is deep by default; watching a getter is not. Deep watching large structures is expensive - in 3.5 you can pass a number to limit depth.

3. When is shallowRef a better choice than ref?

   Correct answer: For large immutable data (e.g. big API responses) where only replacing .value should trigger updates

   ref makes nested objects deeply reactive via Proxies, which costs time for huge structures. shallowRef tracks only .value replacement; use triggerRef if you mutate and need to force an update.

4. Why is mutating state inside a computed getter a bug?

   Correct answer: Computed getters must be pure; side effects make updates unpredictable and can cause infinite loops

   Vue may run the getter at any time (or not at all if nothing reads it). Use a watcher for side effects and keep computed purely derived.

Vue · Senior

1. How does Vue 3 track reactive dependencies?

   Correct answer: Proxy get traps record the running effect as a subscriber (track); set traps notify subscribers (trigger)

   Effects (render functions, computed, watchers) register themselves while they run. Proxies also catch property addition/deletion and array index changes, which Vue 2's getters/setters could not.

2. Why is reactive(obj) === obj false, and why does it matter?

   Correct answer: reactive returns a Proxy; mutating the original object bypasses tracking, so the UI doesn't update

   Always work with the proxy. Calling reactive on the same object returns the same proxy, and toRaw(proxy) gives back the original when you need untracked access.

3. Why does changing state 100 times in one handler cause only one re-render?

   Correct answer: Component updates are queued in a scheduler and flushed once in a microtask

   Each mutation triggers effects, but render jobs are deduplicated in a queue. nextTick() returns the promise of that flush.

4. Since Vue 3.4, what happens when a computed recalculates to the same value?

   Correct answer: Dependents are not triggered, because computed values are compared before notifying

   const isEven = computed(() => count.value % 2 === 0) no longer re-runs downstream effects when count goes from 2 to 4. Returning a new object each time still defeats this.

Combined quizzes with this topic

Questions from several topics at once - just like an interview for a specific role.