24 questions that come up in Vue.js technical interviews, each with the answer and an explanation of why it is right.
Test yourself — 90 question bank<input v-model.lazy="msg">Answer: Syncs on change event instead of input
.lazy makes v-model sync on change event (after blur) instead of input. Other modifiers: .number (parse as number), .trim (trim whitespace).
this.$emit("eventName", data)Answer: This is correct for Options API
$emit emits custom events to parent. First argument is event name, subsequent arguments are passed data. Parent listens with @eventName.
@submit.prevent="handleSubmit"Answer: This is correct (event modifier)
Event modifiers like .prevent are postfixes added to directives. @submit.prevent calls event.preventDefault() automatically.
const app = Vue.createApp({})Answer: This is correct for Vue 3
Vue 3 uses createApp() to create application instances. Vue 2 used new Vue(). The new API allows multiple app instances.
<img v-bind:src="imageUrl">Answer: Both a and c
v-bind:attribute binds data to attributes. The shorthand is :attribute. Both syntaxes are valid.
<button @click="handleClick">Click</button>Answer: This is correct
Use @click (or v-on:click) to handle click events. Pass a method name or inline expression.
{{ message }}Answer: This is correct (mustache syntax)
Double curly braces {{ }} (mustache syntax) interpolate data into text. v-text directive is an alternative.
app.component("my-component", {})Answer: This is correct
app.component() registers components globally in Vue 3. Components must be registered before createApp().mount().
app.mount("#app")Answer: This is correct
mount() attaches the Vue app to a DOM element. Pass a CSS selector or DOM element. Returns root component instance.
Answer: Alternative API for composing component logic with functions
Composition API uses composition functions (composables) instead of options. Better TypeScript support, more flexible code reuse. Vue 3 feature.
Answer: Proxies in Vue 3, Object.defineProperty in Vue 2
Vue 3 uses ES6 Proxies for reactivity (better performance, no caveats). Vue 2 used Object.defineProperty (limitations with arrays, new properties).
Answer: Cannot detect property addition/deletion or array indices
Vue 2 cannot detect property addition/deletion or direct array index modification. Use Vue.set() or array methods. Vue 3 has no such limitations.
Answer: Entry point for Composition API
setup() is the Composition API entry point. Runs before component is created. Returns values exposed to template. Runs only once.
Answer: Creates a reactive reference to a value
ref() wraps a value in a reactive object. Access/modify via .value in script. Auto-unwrapped in templates. Use for primitives.
Answer: Creates ref with shallow reactivity (only .value is reactive)
shallowRef() creates ref where only .value assignment is reactive. Nested properties are not reactive. Performance optimization for large objects.
Answer: Makes an object deeply reactive
reactive() creates a deeply reactive proxy of an object. Unlike ref, properties are accessed directly. Use for objects/arrays.
Answer: Creates reactive object with only root-level reactivity
shallowReactive() creates reactive object where only root-level properties are reactive. Nested objects are not. Performance optimization.
Answer: ref for primitives (needs .value), reactive for objects
ref works with primitives and objects (requires .value). reactive only works with objects. ref auto-unwraps in templates.
Answer: Creates readonly proxy of object
readonly() creates read-only proxy. Mutations warn in development. Nested objects also readonly (deep). Use shallowReadonly() for shallow.
Answer: Cached reactive values based on dependencies
Computed properties are cached based on dependencies. Only re-compute when dependencies change. Use computed() in Composition API.
Answer: Returns raw object from reactive proxy
toRaw() returns the original object from reactive proxy. Use for temporary operations without triggering effects. Changes still tracked normally.
Answer: Both a and b
Both v-if and v-show conditionally render elements. v-if removes from DOM, v-show toggles CSS display. Use v-show for frequent toggles.
Answer: Marks object to never be reactive
markRaw() marks object to skip reactive conversion. Useful for large immutable data structures, third-party class instances. Performance optimization.
Answer: v-if removes from DOM, v-show uses CSS display
v-if conditionally renders (adds/removes from DOM). v-show always renders but toggles CSS display. v-show has cheaper toggle cost.
The full Vue.js bank has 90 questions across 3 difficulty levels — timed, shuffled, and scored.
Take the Vue.js quiz