PUBLIC QUESTION PREVIEW

Vue.js interview questions

Composition API, reactivity, Vuex/Pinia, Vue Router, lifecycle hooks, and component patterns.

Showing 12 of 100 source questions. Sample answers are study material, not employer-specific hiring guidance.

How to work through this preview

Attempt each question before reading its answer. For a concept, give a definition and a concrete example. For code, state constraints, walk through a small input, and check complexity. For design, separate requirements from assumptions and explain failure handling. Use real situations for behavioral answers.

QUESTION 1 / easy / conceptual

What are the major differences between Vue 3 and Vue 2?

Sample answer

Key Vue 3 improvements: 1) Reactivity rewritten using ES6 Proxy instead of Object.defineProperty — detects property addition/deletion and array index changes natively. 2) Composition API alongside Options API for better logic reuse and TypeScript support. 3) Fragments — components can have multiple root nodes. 4) Teleport — render content anywhere in the DOM. 5) Suspense — handle async components declaratively. 6) Better TypeScript support throughout. 7) Smaller bundle (~10KB core gzipped). 8) Faster rendering with improved VDOM and compile-time optimizations (static hoisting, patch flags). 9) Multiple v-model bindings on a single component.

Hints to guide your next attempt

Think reactivity system, API style, performance

Source tags: vue3 / vue2 / composition-api / proxy / reactivity

QUESTION 2 / medium / conceptual

What is the Virtual DOM? How does Vue 3's VDOM differ from Vue 2's?

Sample answer

The Virtual DOM is a lightweight JavaScript object tree mirroring the real DOM. When state changes, Vue diffs the new VDOM against the old one and only updates changed real DOM nodes. Vue 3 improves on Vue 2 with compile-time optimizations: 1) Static tree hoisting — static nodes are created once at module level and reused, never re-diffed. 2) Patch flags — the compiler marks which parts of a node are dynamic so the runtime only checks those parts. 3) Block tree — dynamic children are flattened into arrays, reducing traversal cost during diffing. These make Vue 3 significantly faster for update-heavy UIs.

Hints to guide your next attempt

VDOM is a JS representation of the real DOM
Vue 3 adds static hoisting and patch flags

Source tags: virtual-dom / vdom / diff / performance / compiler

QUESTION 3 / easy / conceptual

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

Sample answer

Options API organizes component code into fixed sections: data(), methods, computed, watch, mounted() etc. Easy to learn but logic for one feature is scattered. Composition API (via setup() or <script setup>) groups code by logical concern — all state, methods, and watchers for a feature sit together. Benefits: 1) Better logic reuse via composables instead of mixins. 2) First-class TypeScript support. 3) Smaller bundle since unused options can be tree-shaken. Both APIs are valid in Vue 3 and can coexist. Composition API is preferred for complex components and shared logic.

Hints to guide your next attempt

Options API groups by option type, Composition API by feature

Source tags: options-api / composition-api / setup / vue3

QUESTION 4 / easy / conceptual

What does createApp() do in Vue 3? How does it differ from Vue 2's new Vue()?

Sample answer

createApp(RootComponent) creates an isolated Vue application instance. Unlike Vue 2's single global Vue constructor with shared global config, createApp() creates isolated instances — each with its own global components, directives, plugins, and config. Multiple Vue apps can run on the same page without polluting each other's global scope. After creation, call app.mount("#app") to render. The instance exposes: app.component() for global components, app.directive() for directives, app.use() for plugins, app.provide() for app-level DI.

Hints to guide your next attempt

createApp creates an isolated app instance
Multiple apps can coexist

Source tags: createapp / app-instance / mount / vue3

QUESTION 5 / easy / conceptual

What are Single File Components (SFCs)? What are the 3 blocks inside one?

Sample answer

Single File Components (.vue files) let you write template, logic, and styles in one file. The 3 blocks: 1) <template> — the component's HTML markup compiled to a render function. 2) <script> or <script setup> — the JavaScript/TypeScript logic; <script setup> is the modern syntax with less boilerplate. 3) <style> — CSS; add the scoped attribute to scope styles to this component only. You can use CSS preprocessors with lang="scss", and CSS Modules with <style module>. SFCs are a Vue-specific format processed by the @vitejs/plugin-vue or vue-loader.

Hints to guide your next attempt

template, script, style

Source tags: sfc / single-file-component / template / script / style

QUESTION 6 / easy / coding

Write a minimal Vue 3 SFC using <script setup> that shows a reactive counter with increment and decrement buttons.

Sample answer

Hints to guide your next attempt

Use ref() for the counter
No .value needed in template

Source tags: script-setup / ref / counter / sfc / beginner

QUESTION 7 / easy / conceptual

What is <script setup> in Vue 3? How does it differ from a regular <script> with setup()?

Sample answer

Hints to guide your next attempt

Compile-time sugar
Top-level declarations auto-exposed to template

Source tags: script-setup / setup / composition-api / compiler-macros

QUESTION 8 / medium / conceptual

How does Vue 3's template compiler work? What is the difference between the full build and runtime-only build?

Sample answer

Vue's template compiler converts <template> HTML into JavaScript render functions at build time (Vite/webpack). These render functions create Virtual DOM nodes. The compiler applies optimizations: static hoisting, patch flags, tree flattening. Two build variants: 1) Full build — compiler + runtime; needed if compiling templates in the browser at runtime (rare). 2) Runtime-only build — ~33% smaller; templates are pre-compiled at build time (standard setup). Always use runtime-only in production. The compiler is a dev dependency only. With Vite, @vitejs/plugin-vue handles compilation automatically.

Hints to guide your next attempt

Compiler transforms templates to render functions
Runtime-only is smaller

Source tags: compiler / runtime / template / build / render-functions

QUESTION 9 / easy / conceptual

What is ref() in Vue 3? When do you use it instead of reactive()?

Sample answer

ref() wraps any value — primitive or object — in a reactive container. Access the value with .value in JavaScript; Vue auto-unwraps it in templates. Use ref for: primitives (strings, numbers, booleans), null, values that might be completely replaced. Use reactive() for plain objects where you never replace the root reference. Key point: you can reassign a ref (count.value = 5) and reactivity is preserved. With reactive, reassigning the variable itself breaks reactivity. Many Vue 3 style guides recommend preferring ref() for everything for consistency — you always know to use .value in script.

Hints to guide your next attempt

ref wraps any value including primitives
reactive only works with objects

Source tags: ref / reactive / reactivity / composition-api

QUESTION 10 / medium / conceptual

What is reactive() in Vue 3? What are its key limitations?

Sample answer

reactive() creates a deeply reactive Proxy around a plain object — nested property changes are tracked automatically. Limitations: 1) Primitives only fail — reactive("hello") does not work; use ref(). 2) Destructuring breaks reactivity: const { count } = reactive({ count: 0 }) — count is now a plain number. Fix with toRefs(). 3) Replacing the root reference: state = reactive({ x: 2 }) — watchers watching the old object are lost. 4) Array index and .length changes ARE supported (unlike Vue 2) since Proxy intercepts them. For objects you will never replace at the root level, reactive() is clean to use.

Hints to guide your next attempt

Proxy-based deep reactivity
Destructuring and reassignment lose reactivity

Source tags: reactive / proxy / limitations / destructuring / torefs

QUESTION 11 / medium / coding

Write an example where reactive() loses reactivity on destructuring, then fix it with toRefs().

Sample answer

import { reactive, toRefs } from "vue"; // BROKEN — count and name are plain values after destructuring const state = reactive({ count: 0, name: "Vue" }); const { count, name } = state; // reactivity lost! count++; // does NOT update the DOM // FIXED with toRefs const state2 = reactive({ count: 0, name: "Vue" }); const { count: countRef, name: nameRef } = toRefs(state2); countRef.value++; // works — reactive, updates the DOM // Each toRefs property is a ref linked to the original reactive object. // Changing countRef.value also changes state2.count and vice versa.

Hints to guide your next attempt

Destructured properties are plain values
toRefs converts each property to a linked ref

Source tags: reactive / torefs / destructuring / reactivity

QUESTION 12 / easy / conceptual

What is computed() in Vue 3? How does it differ from calling a method in the template?

Sample answer

computed() creates a reactive cached value that only recalculates when its reactive dependencies change. A method in the template re-runs on every component re-render regardless of whether its inputs changed. Example: a filter on a 10,000-item list — computed runs once and caches the result until the list or filter criteria change; a method would re-run on every re-render. computed() returns a readonly ref — access with .value in script, auto-unwrapped in template. Use computed for derived/memoized state. Use methods for event handlers or operations with side effects. computed can also have a setter for writable computed properties.

Hints to guide your next attempt

computed is cached based on reactive dependencies

Source tags: computed / methods / caching / reactivity / performance

Check understanding, not recognition

Can you explain the answer without reading it?
Can you show when the approach fails or needs a different assumption?
Can you connect the concept to a real project, task, or decision you have made?
Can you distinguish a simplified interview example from a production requirement?

A LITTLE MORE CLARITY

Frequently asked questions

How many Vue.js questions are shown here?

This public preview shows 12 questions with the supplied answers from the app's 100-question Vue.js bank. Full interactive practice requires signing in.

Should I memorize the sample answers?

Use them as reference explanations, not a script or a guarantee of technical correctness for every environment. Explain your assumptions, validate code against your language and version, and discuss trade-offs. Behavioral answers should be built from your own experience.

What do hints and solution steps mean?

Hints identify ideas to consider before reading the answer. When the source question includes steps, they are shown as a separate walkthrough. Example capacities and design targets in a solution are assumptions for that exercise, not real system statistics.

BUILD YOUR NEXT OPPORTUNITY

Practice Vue.js actively.

Open Topic Practice