Vue.js Deep-Dive Interview Quiz

Q: How many questions are in the Vue.js quiz?

There are 30 questions in total: 10 Beginner, 10 Intermediate, and 10 Advanced, shuffled on every attempt.

Q: Is this quiz tailored for Vue 2 or Vue 3?

It is 100% tailored for modern Vue 3, focusing on the Composition API, TypeScript integration, and current best practices.

Q: Is there any cost or registration needed?

No. All ToolNotch drills are completely free and run entirely in your browser without requiring an account.

Question 1

In Vue 3, what does `createApp(App).mount('#app')` do?

Accepted Answer

It creates a new, isolated app instance from the root component and mounts it to the DOM element matching the selector

Answer

It downloads the Vue runtime from a CDN and injects it into the page

Answer

It compiles all `.vue` files in the project into a single bundle

Answer

It registers `App` as a global component available in every other component

Question 2

What does `{{ message }}` render inside a Vue template?

Accepted Answer

The current value of the `message` reactive property, re-rendered automatically whenever it changes

Answer

The literal string "message"

Answer

A reference to the DOM node, not its value

Answer

It only renders once at mount and never updates

Question 3

What is the shorthand syntax for `v-bind:href="url"`?

Accepted Answer

`:href="url"`

Answer

`@href="url"`

Answer

`#href="url"`

Answer

`.href="url"`

Question 4

What is the key behavioral difference between `v-if` and `v-show`?

Accepted Answer

`v-show` conditionally mounts/unmounts DOM nodes; `v-if` always renders nodes and toggles CSS `display: none`

Answer

`v-if` conditionally mounts/unmounts DOM nodes; `v-show` always renders nodes and toggles CSS `display: none`

Answer

`v-if` works strictly on form inputs and buttons; `v-show` works strictly on custom Vue components

Answer

Both directives compile to identical DOM operations, with `v-show` being merely syntactic sugar for `v-if`

Question 5

Why does Vue require (or strongly recommend) a `:key` binding on elements rendered with `v-for`?

Accepted Answer

It provides a stable identity so Vue can track, reorder, and reuse DOM elements efficiently during diffing

Answer

`:key` is purely cosmetic and only affects the value returned by `element.dataset.key`

Answer

It is required only for `<template>` elements, never for regular HTML tags

Answer

`:key` improves network performance by caching the API response for that list item

Question 6

What does `ref()` do in the Vue 3 Composition API, and why must you access its value via `.value` in `<script setup>`?

Accepted Answer

It wraps primitives in a reactive object via `.value` getter/setter, enabling Proxy dependency tracking

Answer

It binds a direct reference to a real DOM element, using `.value` to access standard HTML input values

Answer

It creates an immutable snapshot of state where `.value` returns deep clones to prevent direct mutations

Answer

It wraps the argument in a Promise where `.value` unwraps the asynchronous payload for the TypeScript compiler

Question 7

What is the primary advantage of a `computed` property over calling a plain method in a template?

Accepted Answer

Computed properties cache their return value based on reactive dependencies, recalculating only when dependencies change

Answer

Methods cache execution results indefinitely; computed properties recalculate on every component render tick

Answer

Computed properties execute asynchronously in Web Workers; plain methods execute synchronously on the main thread

Answer

There is no difference — template methods and computed properties share identical performance and evaluation rules

Question 8

How do you declare that a child component accepts a required `title` prop of type `String` using `<script setup>`?

Accepted Answer

`defineProps({ title: { type: String, required: true } })`

Answer

`const props = ref({ title: String })`

Answer

`export const title = String`

Answer

`this.props.title = String`

Question 9

In a child component using `<script setup>`, what is the correct way to notify the parent that a "submit" event occurred, optionally passing a payload?

Accepted Answer

const emit = defineEmits(['submit']); emit('submit', payload)

Answer

`this.$parent.onSubmit(payload)`

Answer

`window.dispatchEvent(new CustomEvent('submit', payload))`

Answer

`props.onSubmit(payload)`

Question 10

What are the three top-level blocks that make up a standard Vue Single-File Component (`.vue` file)?

Accepted Answer

`<template>`, `<script>`, `<style>`

Answer

`<head>`, `<body>`, `<footer>`

Answer

`<html>`, `<js>`, `<css>`

Answer

`<render>`, `<data>`, `<methods>`

Question 11

What is the main practical difference between `ref({ count: 0 })` and `reactive({ count: 0 })`, and why does replacing the whole object matter?

Accepted Answer

`reactive()` returns a Proxy that loses reactivity if reassigned; `ref()` safely allows reassigning `.value`

Answer

`ref()` is only for objects and arrays; `reactive()` is required for numbers, strings, and boolean values

Answer

`ref()` performs deep reactivity tracking; `reactive()` is shallow and watches only top-level object keys

Answer

`ref()` works only inside Options API components; `reactive()` is restricted exclusively to Composition API

Question 12

When should you reach for `watch()` instead of a `computed` property?

Accepted Answer

When you need to execute a side effect (API calls, DOM mutations, logging) in response to state changes

Answer

`watch` should always be preferred — `computed` is a legacy Vue 2 API

Answer

They are interchangeable in all cases with no meaningful difference

Answer

`watch` is required whenever more than one reactive dependency is involved

Question 13

How does `watchEffect(fn)` decide which reactive sources to track, compared to `watch(source, fn)`?

Accepted Answer

It automatically tracks every reactive property read synchronously during callback execution, needing no dependency array

Answer

It requires passing an explicit array of reactive dependencies as the second argument, identical to React's `useEffect`

Answer

It never re-runs after initial mount — it runs exactly once when the component is created and then automatically disposes

Answer

It tracks strictly `ref()` variables, ignoring property changes made on objects wrapped in `reactive()`

Question 14

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

Accepted Answer

Options API groups code by option type (data, methods); Composition API organizes code by logical feature via composables

Answer

Options API is faster at runtime; Composition API compiles into larger JavaScript bundle chunks in production

Answer

Options API is deprecated in Vue 3 and throws compilation errors unless legacy compatibility mode is activated

Answer

Options API allows sharing state across components; Composition API confines state strictly to a single component tree

Question 15

What problem does `provide()`/`inject()` solve that plain props cannot solve cleanly?

Accepted Answer

It passes data and methods from an ancestor down to deeply nested descendants without manual prop drilling at each level

Answer

It completely replaces Pinia/Vuex by synchronizing state across sibling components without any common parent ancestor

Answer

It allows child components to mutate parent state directly without emitting custom events or using update lifecycle hooks

Answer

It functions strictly between a component and its immediate direct children, enforcing runtime TypeScript prop validation

Question 16

What is the difference between a default slot and a named slot in a Vue component?

Accepted Answer

The default slot captures untargeted content, while named slots provide distinct injection points via <template #name>

Answer

There is no difference — "named" slots are just an alternate syntax for the same mechanism with no behavior change

Answer

Named slots can only pass static text, never dynamic reactive content

Answer

A component can only have one slot total — either default or named, never both

Question 17

In the Composition API, which hook runs after the component has been mounted and its DOM elements are accessible, making it the right place to, e.g., initialize a third-party DOM library?

Accepted Answer

`onMounted`

Answer

`onBeforeMount`

Answer

`onCreated`

Answer

`onUpdated`

Question 18

What must a component do internally to support `v-model` binding from its parent (e.g. `<CustomInput v-model="text" />`)?

Accepted Answer

Accept a modelValue prop and emit an update:modelValue event when the value changes

Answer

Nothing — `v-model` works automatically on any component with no configuration

Answer

Import a special `useVModel()` composable from Vue Router

Answer

Declare the component with `defineModel: true` in its options

Question 19

What problem does the `<Teleport>` built-in component solve?

Accepted Answer

It renders component markup into a different physical DOM node while preserving its reactive scope and logical component tree

Answer

It lazy-loads external component script bundles on demand when they scroll into the visible browser viewport area

Answer

It handles server-side rendering hydration reconciliation between node.js output and client virtual DOM trees

Answer

It provides route transition animations when navigating between pages in Single Page Applications built with Vue Router

Question 20

What does wrapping a dynamic component in `<KeepAlive>` accomplish?

Accepted Answer

It caches inactive component instances in memory rather than unmounting them, preserving their state when switched back

Answer

It forces components to remain permanently rendered in the DOM, toggling their CSS visibility with `display: none`

Answer

It stores component reactive state into browser `localStorage` to survive full page reloads and browser restarts

Answer

It prevents child components from re-rendering when their parent component state changes, acting like React.memo

Question 21

How does Vue 3's reactivity system detect that a component needs to re-render when a reactive property changes, at a mechanical level?

Accepted Answer

A global event loop polling daemon compares JSON snapshots of component data trees every 16 milliseconds to detect diffs

Answer

Object getters and setters in Proxy traps register active effects during read, triggering re-renders only on matching writes

Answer

Every mutation directly invokes the browser DOM update queue synchronously, bypassing Virtual DOM trees completely

Answer

TypeScript compiler transforms reactive properties into EventEmitter event publishers that broadcast changes globally

Question 22

What makes a well-designed Vue composable (e.g. `useMouse()`) different from just a regular utility function?

Accepted Answer

A function using Composition API primitives to encapsulate and return reusable stateful reactive logic

Answer

Composables must be class-based and use the `extends Composable` pattern

Answer

Composables can only be called once per application, similar to a singleton

Answer

Composables must always return a Promise, since they represent async operations exclusively

Question 23

What does the `<Suspense>` built-in component coordinate in Vue 3?

Accepted Answer

It renders fallback UI while nested async component dependencies resolve, mounting the final resolved tree atomically

Answer

It pauses component lifecycle execution and prevents mounting until an explicit user click or gesture event triggers

Answer

It replaces `<KeepAlive>` by caching async component instances in memory for instantaneous restoration during navigation

Answer

It automatically retries failed asynchronous network imports using exponential backoff until a hard timeout is reached

Question 24

What does calling `h('div', { class: 'box' }, 'Hello')` produce, and when would you use `h()` instead of a `<template>`?

Accepted Answer

It returns a virtual DOM node (VNode) for programmatic rendering when template syntax lacks sufficient flexibility

Answer

It inserts a concrete `

` element into the browser DOM synchronously, returning its native HTMLElement reference

Answer

It serves as an internal routing helper that executes `history.pushState()` calls inside Vue Router navigation cycles

Answer

It is restricted exclusively to JSX/TSX build targets and cannot be invoked from standard JavaScript or TypeScript files

Question 25

What is a Vue custom directive used for, and which hook would you implement to run logic immediately after the bound element is inserted into the DOM?

Accepted Answer

They encapsulate reusable low-level DOM manipulation logic; `mounted(el, binding)` fires once the element enters the DOM

Answer

They attach dynamic CSS utility classes to elements; `mounted` is the only lifecycle hook supported by directive APIs

Answer

Custom directives were completely deprecated in Vue 2 and replaced by Composition API hooks throughout modern Vue 3

Answer

They apply exclusively to custom Vue component root tags and are rejected when declared on native HTML markup elements

Question 26

In Vue Router, what is the difference between a global `beforeEach` guard and a per-route `beforeEnter` guard?

Accepted Answer

`beforeEach` executes globally on every navigation, whereas `beforeEnter` triggers only when entering that specific route

Answer

`beforeEnter` executes on every global route change, whereas `beforeEach` runs only on specific route definitions

Answer

`beforeEnter` runs at application build time during code splitting; `beforeEach` runs in client browser runtime

Answer

Both guards share identical execution scopes, with `beforeEnter` being merely an obsolete alias for `beforeEach`

Question 27

What is the main advantage of Pinia stores over manually sharing a `reactive()` object between components as a homegrown state management solution?

Accepted Answer

Pinia provides devtools time-travel, SSR-safe store instances per request, and native TypeScript inference

Answer

Pinia is functionally identical to a shared reactive object — it is purely a stylistic wrapper with no additional capability

Answer

Pinia stores can only hold primitive values, never nested objects or arrays

Answer

Pinia replaces Vue Router entirely, merging routing and state management into one API

Question 28

What does `shallowRef()` change compared to a regular `ref()`, and when is that tradeoff worthwhile?

Accepted Answer

It only tracks reactivity on .value reassignment, skipping deep reactive conversion of nested properties

Answer

`shallowRef()` makes the value immutable and throws an error on any mutation attempt

Answer

`shallowRef()` is a synonym for `ref()` with no actual behavior difference, kept only for naming symmetry with `shallowReactive`

Answer

`shallowRef()` can only hold primitive values, never objects

Question 29

What causes a "hydration mismatch" warning in a server-rendered Vue application, and why is it dangerous to ignore?

Accepted Answer

Client-rendered Virtual DOM mismatches server-rendered HTML markup, causing Vue to discard HTML and re-render from scratch

Answer

It represents a benign dev-mode warning caused by CSS class names, having zero consequence on production data or events

Answer

It indicates that Vue Router failed to match the incoming request URL against registered client routing table entries

Answer

It occurs exclusively when Pinia stores fail to serialize state into script tags during server side rendering pipelines

Question 30

What are "patch flags" in Vue 3's compiled render output, and how do they speed up re-renders compared to Vue 2's virtual DOM diffing?

Accepted Answer

Compiler-generated numeric bitmasks on dynamic VNodes that guide the diff algorithm to inspect only mutable bindings

Answer

Special CSS class attributes added to dynamic nodes to enable hardware-accelerated GPU animations during transitions

Answer

Cryptographic checksum tags verifying that client runtime bundles match the precompiled production server artifacts

Answer

Runtime memory pointers that link Virtual DOM elements directly to native browser C++ layout tree structures

Vue.js Interview Quiz

What the Vue.js interview quiz covers

Difficulty levels

Question topics covered

How to use the Vue.js quiz

Frequently asked questions about the Vue.js quiz

TypeScript

Node.js Fundamentals

System Architecture