What is the difference between the Composition API and the Options API in Vue?

The Options API organizes a component into named sections (data, methods, computed, watch, lifecycle hooks). The Composition API uses functions (ref, reactive, computed, watch, lifecycle hooks) inside setup() or . The Options API is still valid and great for simple components. The Composition API scales better for complex components because you group logic by feature rather than by option type, and it enables reusable composables instead of conflict-prone mixins. It also has first-class TypeScript support.

How does Vue's reactivity system work in Vue 3?

Vue 3's reactivity is built on JavaScript Proxy. When you call reactive(obj), Vue wraps the object in a Proxy that intercepts every property read (get) and write (set). During rendering or inside watchEffect/computed, Vue records which reactive properties were read — this is dependency tracking. When any tracked property changes, Vue re-runs only the effects (renders, computeds, watchEffects) that depend on it. ref() wraps a single value in an object with a .value property so the Proxy can intercept it. In templates, .value is unwrapped automatically.

What is the difference between computed and watch in Vue?

computed derives a new reactive value from other reactive state and caches it — the function only re-runs when its tracked dependencies change. Use it to transform or combine data synchronously. watch observes one or more reactive sources and runs a callback (side effect) when they change. It does not return a value and can be async. Use it for API calls, writing to localStorage, logging, or anything that must happen in response to a change but should not be part of the render output. Mnemonic: computed = derive a value; watch = react with a side effect.

When should you use Pinia vs. Vuex vs. local component state?

Use local component state (ref, reactive) for data used only within a single component or a small parent-child subtree — form inputs, modal open/close, hover state. Use Pinia (the recommended global store for Vue 3) when state is genuinely shared across unrelated parts of the application — auth, cart, notifications, user preferences. Vuex is the older standard (Vue 2 era) and still works in Vue 3, but Pinia is simpler, has better TypeScript support, no mutations layer, and full tree-shaking. Do not promote state to a store for convenience — it creates coupling.

How do you prevent memory leaks in Vue components?

Pair every setup operation in onMounted with a corresponding teardown in onUnmounted. This includes: removing event listeners added with addEventListener, clearing timers (clearInterval, clearTimeout), canceling fetch requests (AbortController), disconnecting IntersectionObserver, MutationObserver, ResizeObserver instances, and unsubscribing from external stores or WebSocket connections. Composables that set up side effects should own their own cleanup — call onUnmounted inside the composable so the cleanup is guaranteed regardless of which component uses the composable.

What is the difference between v-if and v-show?

v-if conditionally removes and re-creates the element and its entire subtree in the DOM. It has higher toggle cost (DOM creation/destruction) but lower initial cost when the condition starts false. v-show always renders the element but toggles display: none via CSS. It has lower toggle cost (just a style change) but always pays the initial render cost. Rule of thumb: use v-if for conditions that rarely change or that start false (auth-gated sections, error states, feature flags). Use v-show for frequently toggled UI like dropdowns, tabs, and accordions. Note: v-show cannot be used on elements or combined with v-else.

How do composables work and why do they replace mixins?

A composable is a plain function that uses Vue's Composition API internally (ref, reactive, computed, lifecycle hooks) and returns reactive state and methods. It encapsulates reusable stateful logic. They replace mixins because: there are no namespace collisions (you name the returned values yourself), dependencies are explicit (no magic injection), they are fully TypeScript-compatible, and they can be tested in isolation by just calling the function. A mixin merges its properties into the component invisibly, making it hard to trace where data or methods come from, especially when multiple mixins are applied.

How do you test Vue components effectively?

Use Vitest with @vue/test-utils. The core principle is to test user-visible behavior, not internal implementation: assert rendered text, test user interactions by triggering clicks/inputs, check emitted events, and cover loading and error states. Use flushPromises() to wait for async operations to settle. Mock API modules with vi.mock() rather than intercepting fetch. For composables, call the function directly in a test without mounting a component — unless it uses lifecycle hooks, in which case use a withSetup helper. Do not assert internal reactive variable values; that tests implementation, not behavior.

What are navigation guards in Vue Router and what are they used for?

Navigation guards are functions that run during route transitions, giving you control over whether the navigation proceeds. Global guards (beforeEach, beforeResolve, afterEach) run for every navigation and are defined on the router instance — used for authentication checks, setting page titles, and analytics. Per-route guards (beforeEnter) are defined on a route object for route-specific logic. Component-level guards (onBeforeRouteLeave, onBeforeRouteUpdate) run in the component and are useful for prompting users about unsaved changes. Return false to cancel navigation, return a route location to redirect, or return nothing/true to proceed.

How do you optimize a Vue app that has performance issues?

First diagnose: use Vue DevTools to highlight which components re-render, and the onRenderTriggered hook to identify what triggers re-renders. Common fixes by category — Bundle: route-level code splitting with dynamic imports, component-level lazy loading with defineAsyncComponent, tree-shaking large libraries. Rendering: use computed instead of methods for derived values, use v-once for static content, v-memo for stable subtrees, stable keys in v-for. Large lists: virtual scrolling (vue-virtual-scroller) for thousands of items. Caching: KeepAlive to cache expensive components between route navigations. Events: debounce/throttle input and scroll handlers.

Vue.js Interview Questions and How to Answer Them (40+ Questions)

A comprehensive guide to Vue.js interview questions covering 42 questions across all levels — from core concepts to senior architecture decisions — with real code examples and interviewer tips for each answer.

Vue.js Interview Questions and How to Answer Them (42 Questions)

This guide covers 42 questions across every layer of the Vue.js stack — from core concepts to advanced architecture decisions. Each answer explains the *why*, shows real code, and points out what interviewers are actually listening for. Questions are ordered from foundational to senior-level so you can stop at the right tier for your target role.

Core Concepts (Questions 1–10)

1. What is Vue.js and what problems does it solve?

Vue.js is a progressive JavaScript framework for building user interfaces. "Progressive" means you can adopt it incrementally: sprinkle it into a server-rendered page, or build an entire SPA with it.

It solves three main problems:

Declarative rendering — you describe what the UI should look like for a given state, and Vue updates the DOM automatically.
Component-based architecture — UI is split into self-contained, reusable pieces.
Reactive data binding — the UI stays in sync with application state without manual DOM manipulation.

What interviewers listen for: a concise definition followed by a real trade-off. Vue sits between React (maximum flexibility, you own everything) and Angular (opinionated, batteries-included). Vue ships a router and state library, but they're optional.

2. What is a Single-File Component (SFC)?

An SFC is a .vue file that collocates the component's template, logic, and styles in one place:

vue

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
button { padding: 8px 16px; }
</style>

Benefits: co-location improves readability; scoped prevents style leakage; build tools (Vite, webpack) handle transforms. The