Vue.js Interview Questions: Complete Guide for 2026 (Fresher to Senior)

Vue.js interviews in 2026 test whether you understand Vue 3 reactivity, component communication, Single-File Components, Composition API, routing, state, and performance tradeoffs.

The strongest answers do not sound like API lists. They explain how data changes, which component owns it, how the template updates, and what happens when the app grows.

The official Vue introduction documents Vue 3 as the current guide, with Single-File Components for build-tool projects and Composition API plus SFCs as the recommended path for full applications.

What Vue interviewers are checking

Fresher Vue.js interview questions

1. What is Vue.js?

Vue.js is a JavaScript framework for building user interfaces. It uses components, declarative templates, reactive state, directives, and an ecosystem for routing, state management, tooling, and server rendering.

Vue can be used progressively on part of a page or as the framework for a full application.

2. What is a Single-File Component?

A Single-File Component, usually a .vue file, keeps a component's template, script, and styles in one file.

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

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

SFCs are common in build-tool-enabled Vue projects because they keep the component's UI, logic, and local styles close together.

3. What is the Composition API?

The Composition API is a Vue API style where component logic is written with functions such as ref, reactive, computed, watch, and lifecycle hooks inside setup or <script setup>.

It is especially useful when a component has several related pieces of logic or when logic should be extracted into composables.

4. What is the Options API?

The Options API organizes a component into options such as data, methods, computed, watch, and lifecycle hooks.

It is still valid Vue. In interviews, avoid presenting Composition API as "new good" and Options API as "old bad." Explain the tradeoff: Options API is approachable for simpler components, while Composition API scales better for shared logic and complex features.

5. What is ref()?

ref() creates a reactive value. In script, read and write the value through .value. In templates, refs are automatically unwrapped.

const count = ref(0);
count.value += 1;

Use ref for primitives and often for values that may be replaced.

6. What is reactive()?

reactive() creates a reactive proxy for an object.

const form = reactive({
  email: "",
  password: "",
});

Use it for object state where you want to mutate properties. Be careful when destructuring because destructuring can lose reactivity unless you use helpers designed for that case.

For example, destructuring const { email } = form gives you the current value, not a reactive binding. Use toRefs() when separate reactive bindings are needed:

import { reactive, toRefs } from "vue";

const form = reactive({
  email: "",
  password: "",
});

const { email, password } = toRefs(form);

That is a common source of "why did my template stop updating?" interview questions.

7. What is the difference between computed and watch?

Use computed for derived values that can be calculated from reactive state.

Use watch for side effects when a reactive value changes: calling an API, syncing with storage, logging analytics, or bridging to non-Vue code.

If you can calculate it during render, use computed instead of watch.

8. What are directives?

Directives are special template attributes that apply reactive behavior. Common examples include:

• v-if for conditional rendering
• v-show for toggling visibility with CSS
• v-for for lists
• v-bind or : for binding attributes
• v-on or @ for events
• v-model for two-way form bindings

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

v-if conditionally mounts or unmounts DOM. Use it when the condition changes rarely or when the component should not exist until needed.

v-show keeps the element in the DOM and toggles display. Use it for frequent visibility changes where mount cost matters less than toggle speed.

10. Why do keys matter in v-for?

Keys help Vue track item identity across list updates. Use stable IDs when rendering lists that can change order, insert, remove, or filter.

Index keys can preserve state on the wrong row when the list changes.

Component communication questions

11. How do props work?

Props pass data from parent to child. A child should treat props as read-only input.

<script setup lang="ts">
defineProps<{
  title: string;
  completed: boolean;
}>();
</script>

If the child needs to request a change, emit an event instead of mutating the prop.

12. How do emits work?

Emits let a child component notify its parent that something happened.

<script setup lang="ts">
const emit = defineEmits<{
  save: [id: string];
}>();

function saveTodo(id: string) {
  emit("save", id);
}
</script>

The parent owns the state change. The child reports the user action.

13. What is v-model on a component?

v-model creates a two-way binding convention between a parent and child component. In Vue 3, component v-model is based on a prop and an update event.

Use it for form-like components such as inputs, selects, toggles, and date pickers. Avoid hiding complex business updates behind v-model when explicit events would be clearer.

In current Vue, defineModel() is the concise way to declare a component model in <script setup>. In older or more explicit code, the same idea appears as a modelValue prop and an update:modelValue event. Knowing both helps in interviews because many production codebases mix versions and styles.

14. What are slots?

Slots let a parent pass template content into a child component.

Use slots for layout components, cards, modals, tables, and reusable shells where the child owns structure but the parent owns content.

15. What are scoped slots?

Scoped slots let the child expose data to the slot content.

They are useful for reusable list, table, or form components where the child manages behavior and the parent controls rendering.

16. What is provide/inject?

provide and inject pass values through a component tree without prop drilling.

Use them for shared context such as theme, form context, table context, or dependency-style values. Do not use them to hide ordinary parent-child data flow.

Reactivity and lifecycle questions

17. How does Vue reactivity work at a high level?

Vue tracks reactive reads during rendering or effects, then updates the affected parts when reactive values change. In Vue 3, object reactivity is built on JavaScript proxies, while refs wrap individual values.

The interview goal is to explain dependency tracking and updates without claiming Vue "rerenders everything."

18. What is a composable?

A composable is a function that uses Vue Composition API features to package reusable stateful logic.

import { onMounted, onUnmounted, ref } from "vue";

export function useWindowWidth() {
  const width = ref(0);

  function updateWidth() {
    width.value = window.innerWidth;
  }

  onMounted(() => {
    updateWidth();
    window.addEventListener("resize", updateWidth);
  });
  onUnmounted(() => window.removeEventListener("resize", updateWidth));

  return { width };
}

Good composables clean up side effects and expose a small API.

19. What lifecycle hooks do you use often?

Common Composition API hooks include:

• onMounted for browser-only setup after mount
• onUpdated for reacting after DOM updates when needed
• onUnmounted for cleanup
• onErrorCaptured for handling descendant errors

Do not fetch data in a lifecycle hook by reflex. In router-based apps or SSR, data loading may belong at the route or framework layer.

20. What is the difference between watch and watchEffect?

watch observes explicit sources and runs when those sources change. It is better when you want control over what triggers the effect.

watchEffect runs immediately and tracks reactive values used inside it. It is convenient, but less explicit.

Use watch when correctness depends on a specific source.

Routing, state, and async questions

21. How does Vue Router fit into a Vue app?

Vue Router maps URLs to components and supports route params, query params, nested routes, navigation guards, lazy-loaded route components, and active links.

A good routing answer includes user states: loading, not found, unauthorized, and error.

22. How do you fetch data in Vue?

For a simple client-rendered component, use reactive request state and fetch data when the route or input changes. In a framework or SSR setup, prefer the framework's data-loading pattern.

Always model:

• Loading
• Success
• Empty
• Error
• Retry or refresh when needed

23. What is Pinia?

Pinia is the commonly used state management library in the Vue ecosystem. Use a store for state shared across unrelated components or routes, such as auth user, cart, preferences, or app-wide entities.

Do not move every local form value into a store. Local state is easier to reason about when only one component owns it.

A good Pinia answer also separates server cache from client state. If the data mainly comes from the server and needs refetching, invalidation, pagination, or background refresh, a data-fetching layer or framework loader may be a better fit than manually copying everything into a store.

24. How do you keep URL state and app state in sync?

Put shareable, bookmarkable state in the URL: search query, filters, sort order, page number, and selected tab when the user expects back-button behavior.

Keep ephemeral UI state local: open menus, draft input, hover state, and one-off loading flags.

25. How do you handle forms in Vue?

Use v-model for field values, validation for user feedback, and explicit submit handling for server work.

A good form answer includes labels, accessible errors, disabled pending state, server-side validation, and duplicate-submit protection.

Senior Vue.js interview questions

26. How would you design a reusable modal?

Use props for open state, emits for close/confirm events, slots for content, and lifecycle or composables for focus trapping, Escape handling, and scroll locking. Keep accessibility requirements explicit: role, label, focus return, and keyboard behavior.

27. How would you optimize a slow list?

First identify the bottleneck. Use stable keys, avoid expensive work directly in templates, move derived data to computed values, paginate or virtualize long lists, lazy-load heavy rows, and measure before changing architecture.

Also check whether the list reactivity is too deep for the job. For large immutable datasets, shallowRef() can be useful because Vue tracks replacement of the array rather than every nested property. That is a senior-level answer only when you can explain the tradeoff: nested mutation will not trigger updates the same way.

28. How would you organize a large Vue app?

Group by feature when features are large enough: route, components, composables, store, API client, tests, and types. Keep truly shared UI in a shared component area. Avoid a giant global components folder full of one-off pieces.

29. How do you choose between props, provide/inject, and Pinia?

Use props and emits for direct parent-child communication. Use provide/inject for context shared by a component subtree. Use Pinia when unrelated parts of the app need the same state or actions.

The decision is about ownership and reach.

30. How do you test Vue components?

Test user-visible behavior: rendered text, form interactions, emitted events, loading states, error states, and accessibility-critical behavior. Avoid tests that only assert implementation details such as private method calls.

31. What are common Vue performance mistakes?

Common mistakes include unstable keys, deep watchers on large objects, expensive computed work over huge arrays, unnecessary global state updates, rendering too many rows at once, and importing large dependencies into frequently used components.

32. How do you avoid memory leaks?

Clean up event listeners, timers, subscriptions, observers, and third-party library instances in onUnmounted. Composables that create side effects should own their cleanup.

33. What should you know about TypeScript in Vue?

Know how to type props, emits, refs, computed values, composables, API responses, and store state. With <script setup lang="ts">, keep component contracts close to the component.

Do not type everything as any to make the template pass. That removes the main value of TypeScript.

34. How would you review a Vue PR?

Check state ownership, prop mutation, event names, stable keys, computed versus watcher usage, cleanup for side effects, accessible form and modal behavior, route states, and whether shared code is genuinely reusable.

35. What is a strong answer pattern for Vue interviews?

Use this structure:

1. Name the state owner.
2. Name the reactive primitive or component API.
3. Explain how the template updates.
4. Mention cleanup or edge cases.
5. Tie the answer to user behavior.

That keeps your answer practical whether the prompt is a small component, a route, or a senior architecture question.

Practice plan before a Vue interview

Build these small features:

Pair Vue practice with general frontend practice: JavaScript data work, CSS layout, browser APIs, accessibility, and UI problem solving. Vue gives you a productive component model, but interviews still reward careful frontend judgment.