Q: What is a Single File Component (SFC)?

**Target Audience:** Beginners who have seen .vue files but do not know what is inside one or what happens to it. Basic HTML, CSS and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled JavaScript and CSS in sections 5 and 6 are the real, unedited output of @vue/compiler-sfc 3.5.44, the same compiler @vitejs/plugin-vue calls during a Vite build. The runnable

Question 1

How do you handle events in Vue (v-on and event modifiers)?

Accepted Answer

**Target Audience:** Beginners wiring up buttons, forms and keyboard shortcuts in Vue. Basic DOM events (click, submit, keyup) assumed; no Vue experience needed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every "what got logged" table, compiled handler and ordering claim below was produced by dispatching real DOM events at components mounted on Vue 3.5.44 in jsdom. ## 1. Why This E

Question 2

What are props in Vue and how do you validate them?

Accepted Answer

**Target Audience:** Vue beginners who have built a component or two and now need them to accept configuration from a parent.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every warning message, rendered value and production-build result quoted below came from running the code on Vue 3.5.44, compiled with `@vue/compiler-sfc` and mounted in jsdom, in development and production mode.

## 1. Why This Even Matters — A Story First

A coffe

Question 3

What are Vue directives? Give common examples.

Accepted Answer

**Target Audience:** Beginners who can read a basic Vue template and want to understand every v- attribute they see. Basic HTML and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The rendered output, the compiled render function and the warnings below come from compiling and mounting the example on Vue 3.5.44, not from memory. ## 1. Why This Even Matters — A Story First Imagine a theatre sc

Question 4

How does v-model work on form inputs?

Accepted Answer

**Target Audience:** Vue beginners building their first forms. Assumes HTML form elements and a little JavaScript.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every state dump, compiler snippet and compiler error below came from running Vue 3.5.44: templates compiled with `@vue/compiler-sfc` / `@vue/compiler-dom`, mounted in jsdom, with a driver typing, clicking and selecting.

## 1. Why This Even Matters — A Story First

Picture a

Question 5

What are scoped styles in Vue?

Accepted Answer

**Target Audience:** Vue developers who write `<style scoped>` and want to know precisely what it does and where its edges are.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiled CSS is real output from `@vue/compiler-sfc` 3.5.44 `compileStyle()` and from a `vite build` (vite 8.3.4, `@vitejs/plugin-vue` 6.0.10). The DOM attributes come from mounting the components in jsdom, and the computed colours were read from the built app

Question 6

What is a Single File Component (SFC)?

Accepted Answer

**Target Audience:** Beginners who have seen .vue files but do not know what is inside one or what happens to it. Basic HTML, CSS and JavaScript assumed. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The compiled JavaScript and CSS in sections 5 and 6 are the real, unedited output of @vue/compiler-sfc 3.5.44, the same compiler @vitejs/plugin-vue calls during a Vite build. The runnable

Question 7

What are v-model modifiers?

Accepted Answer

**Target Audience:** Vue developers who already use `v-model` on inputs and want to control when and how values are stored.
**Difficulty:** Easy

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every value shown below was read from component state after a driver focused, typed into and blurred real inputs, on Vue 3.5.44 compiled with `@vue/compiler-sfc` and mounted in jsdom.

## 1. Why This Even Matters — A Story First

Think of a receptionist taking phone m

Question 8

How do dynamic routes and route params work in Vue Router?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who has a basic router set up — see [how to set up Vue Router](/interview-question/how-do-you-set-up-vue-router-routes-routerlink-routerview-history-modes) if not. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output block was produced by running the code on Vue 3.5.44 and vue-ro

Question 9

What is defineModel() in Vue 3.4+ and how does it replace manual prop + emit?

Accepted Answer

**Target Audience:** Vue 3 developers who know the [component v-model contract](/interview-question/how-does-v-model-work-on-components) and want to know what `defineModel()` really does.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiled output is from `@vue/compiler-sfc` 3.5.44 `compileScript()`, and every value read after a click or keystroke came from mounting the components in jsdom on Vue 3.5.44. Version history comes

Question 10

How do you add global properties or config?

Accepted Answer

**Target Audience:** Vue developers setting up an app's entry file, or migrating `Vue.prototype` code from Vue 2.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The runtime output below came from bundling the example (`main.js` plus three SFCs) with esbuild and running it in jsdom on Vue 3.5.44; the TypeScript errors came from `vue-tsc` 3.3.13 with `strict: true`.

## 1. Why This Even Matters — A Story First

Think of an office build

VUE.JSDECODED.

Easy

How do you handle events in Vue (v-on and event modifiers)?

What are props in Vue and how do you validate them?

What are Vue directives? Give common examples.

How does v-model work on form inputs?

What are scoped styles in Vue?

What is a Single File Component (SFC)?

What are v-model modifiers?

Medium

How do dynamic routes and route params work in Vue Router?

What is defineModel() in Vue 3.4+ and how does it replace manual prop + emit?

How do you add global properties or config?

How do you create a custom directive in Vue?

How do dynamic components work?

Hard

What is lazy hydration in Vue 3.5 — hydrate strategies (idle, visible, interaction)?

What is a custom renderer in Vue (createRenderer)?