Question 1

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 2

What is Nuxt and how does it relate to Vue?

Accepted Answer

**Target Audience:** Vue developers who have heard of Nuxt and need to explain what it adds. No Nuxt experience assumed. **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. Everything in the "Verified" sections comes from a real Nuxt 4.6.1 project created for this answer: built with nuxt build, run as a production server, fetched with

Question 3

What is the difference between ref and reactive?

Accepted Answer

**Target Audience:** Developers who have written a Vue 3 component or two and want to stop guessing between ref and reactive. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output below was produced on Vue 3.5.44: the reactivity probe with node, the component by compiling it with @vue/compiler-sfc and clicking through it in js

Question 4

What is useTemplateRef() (Vue 3.5) and how does it improve on ref=""?

Accepted Answer

**Target Audience:** Vue developers who already use template refs and want to know what changed in 3.5. The general rules for refs (timing, `v-for`, component instances) are in [accessing a DOM element or child component instance](/interview-question/how-do-you-access-a-dom-element-or-child-component-instance). **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 interviewe

Question 5

Why are composables preferred over mixins?

Accepted Answer

**Target Audience:** Vue developers maintaining Options API code or moving a codebase to the Composition API.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every behaviour claimed here, including the absence of warnings, was observed by compiling and mounting the two examples on Vue 3.5.44 with the repo verifier.

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

Picture a shared office whiteboard. Team A writes "count: 3" on it, meaning

Question 6

How do you fetch data in a Vue component (loading, errors, cancellation)?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview who knows [watch and watchEffect](/interview-question/what-is-the-difference-between-watch-and-watcheffect) and basic fetch — no data-fetching library required. **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. All output was produced on Vue 3.5.44. **No real network was used*

Question 7

How do you create a custom directive in Vue?

Accepted Answer

**Target Audience:** Vue developers who need low-level DOM behaviour they can reuse across templates. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every log line and warning below was printed on Vue 3.5.44 by mounting the SFCs in jsdom with the repo verifier (dev build), and the SSR output by renderToString from @vue/server-renderer. The typed example was checked with TypeScript 5 in strict mode

Question 8

What are composables in Vue?

Accepted Answer

**Target Audience:** Vue developers who know `ref` and `computed` and want to reuse logic properly.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. Every output in the "Verified" sections was produced by running the examples on Vue 3.5.44: the SFC was compiled and mounted in jsdom with the repo verifier, the plain-JavaScript example ran under Node.

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

Think of a power tool battery. You do not

Question 9

What is the Composition API and how does it differ from the Options API?

Accepted Answer

**Target Audience:** Anyone preparing for a Vue interview — assumes basic JavaScript, no Vue experience required.
**Difficulty:** Medium

> **How to read this doc:** Plain language first, then `📌 Interview term:` callouts with the words an interviewer listens for. Every output quoted in a "Verified" section was produced by compiling the example with `@vue/compiler-sfc` and mounting it in jsdom on Vue 3.5.44, the current stable release; bundle sizes come from a real `vite build`.

## 1. Why This

Question 10

What is effectScope?

Accepted Answer

**Target Audience:** Vue developers writing composables or libraries, or curious how components clean up their watchers. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Every log line below was printed by running the code on Vue 3.5.44, as Node scripts against the vue package and as an SFC mounted in jsdom. This page is about **the API itself**. How composables use it to clean up (shared composables, async leaks,

VUE.JSDECODED.

Easy

What are Vue directives? Give common examples.

Medium

What is Nuxt and how does it relate to Vue?

What is the difference between ref and reactive?

What is useTemplateRef() (Vue 3.5) and how does it improve on ref=""?

Why are composables preferred over mixins?

How do you fetch data in a Vue component (loading, errors, cancellation)?

How do you create a custom directive in Vue?

What are composables in Vue?

What is the Composition API and how does it differ from the Options API?

Hard

What is effectScope?

What is async setup and top-level await?

How would you structure state management for a large Vue app?

What is effectScope() and why do composables use it for cleanup?