Vue interviews focus on the reactivity system, the Composition API, and component communication. Below are the most common questions with model answers.
Every question comes with a model answer you can compare yours against.
ref wraps any value — including primitives — in an object with a .value property, while reactive returns a Proxy and only works for objects. ref survives destructuring and reassignment, which reactive does not: destructuring a reactive object yields plain values that lose reactivity. The common guidance is to default to ref and reach for reactive only for a closely related group of fields.
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.
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.
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.
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.
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.
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.
v-if adds or removes the element from the DOM, so it costs a mount and unmount but avoids rendering anything when false — right for content that rarely toggles or is expensive. v-show always renders the element and toggles CSS display, so switching is cheap but the component is always constructed. Use v-show for something toggled frequently, such as a dropdown.
In a real interview you speak under pressure. Cam asks these same questions, scores every answer, and shows exactly what to fix.
Practice a Vue Frontend interview →