AI
prepair.app
Start interview →
EnglishРусскийУкраїнська
💚

Middle Vue FrontendVue interview questions

Middle · 2–4 years of experience

Vue interviews focus on the reactivity system, the Composition API, and component communication. Below are the most common questions with model answers. Middle: deeper understanding, optimization, and real-world situations.

Topics to prepare

Reactivity: ref and reactive
Composition API vs Options API
Component lifecycle
Pinia / Vuex
Slots and props
Vue Router

6 Middle-level questions with answers

1

How does reactivity work in Vue 3? What is Proxy doing under the hood?

Answer

Vue 3 wraps state in a Proxy that intercepts property reads to track which effects depend on them and property writes to trigger those effects. Unlike Vue 2's Object.defineProperty, a Proxy sees property addition and deletion and works with arrays and Map, so Vue.set is no longer needed. The trade-off is that Proxy requires modern browsers and that reactivity is lost the moment you destructure out of the proxy.

2

Explain the difference between computed and watch.

Answer

computed derives a value from other reactive state, caches it, and recomputes only when a dependency changes — use it whenever the result is a value you render. watch runs a side effect in response to a change: fetching data, writing to storage, triggering an animation. If you find yourself assigning to a variable inside a watcher, a computed is almost always the better answer.

3

Name the lifecycle hooks in Vue 3.

Answer

In the Composition API they are onBeforeMount and onMounted, onBeforeUpdate and onUpdated, onBeforeUnmount and onUnmounted, plus onErrorCaptured, onActivated and onDeactivated for cached components. setup() itself replaces beforeCreate and created. onMounted is where DOM access and subscriptions belong, and onUnmounted is where you must tear them down.

4

What are slots? Give an example of a scoped slot.

Answer

A slot is a placeholder in a child template that the parent fills with its own markup, which makes wrapper components reusable. A scoped slot additionally passes data back up from the child to the slot content — for example a list component that handles fetching and looping while letting the parent decide how to render each item. That inverts control: the child owns behaviour and the parent owns presentation.

5

How do you pass data from a child component to its parent?

Answer

The child declares events with defineEmits and calls emit with a payload, and the parent listens with v-on. For two-way binding on a single value, v-model is sugar over a prop plus an update event. Directly mutating a prop is not allowed because it breaks the one-way data flow that makes state changes traceable.

6

What is Pinia and why is it preferred over Vuex?

Answer

Pinia is the official state library for Vue 3: stores are plain functions with state, getters, and actions, and there are no mutations. It infers TypeScript types without manual annotation, supports modular stores by default instead of nested modules, and works with both the Options and Composition APIs. The result is less boilerplate and far better editor support than Vuex.

🦎

Reading answers is not enough

In a real interview you speak under pressure. Cam asks these same questions, scores every answer, and shows exactly what to fix.

Practice a Middle Vue Frontend interview →
Free · 3 interviews per month

Other levels — Vue Frontend

Junior Vue FrontendSenior Vue FrontendAll Vue Frontend questions

Other specializations

🔍Middle Manual QA🤖Middle QA AutomationMiddle Java Backend🐍Middle Python Backend🐘Middle PHP Backend🦫Middle Go Backend🟢Middle Node.js Backend⚛️Middle React Frontend🅰️Middle Angular FrontendMiddle Next.js