Why was Reactivity Transform ($ref, $computed) removed in Vue 3.4?

Q: Why was Reactivity Transform ($ref, $computed) removed in Vue 3.4?

**Target Audience:** Vue developers maintaining or interviewing about code from the 3.2/3.3 era, and anyone curious why Vue still makes you type .value . **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Dates and the deprecation history come from the vuejs/core changelogs, the Vue blog and the original RFC discussion, linked inline. What happens to old code today was checked by compiling and running it on Vue 3.5.44 and type-checking it with vue-tsc 3.3.13; the Vue Macros output was produced with @vue-macros/reactivity-transform 3.1.4. ## 1. Why This Even Matters — A Story First A city once tried an experiment: it removed the painted lines between cycle lanes and car lanes on one street, arguing that drivers and cyclists would read the road better without visual clutter. It did look cleaner. But people new to the street could no longer tell where the cycle lane was, the rules changed the

The problem

Question presented to candidate: "Some older Vue 3 code uses let count = $ref(0) with no .value. What was that feature, why did the Vue team remove it, and what happens if that code meets Vue 3.4 or later?"

What a strong answer should cover:

Reactivity Transform was an experimental, opt-in compile-time transform: $ref, $computed, $shallowRef and friends declared "reactive variables" that the compiler rewrote to ref() plus .value; $() destructured refs and $$() escaped back to the raw ref.
History: shipped experimentally in 3.2.0 (Aug 2021), dropped by the team in Feb 2023, deprecated in 3.3.0 (May 2023), removed in 3.4.0 (Dec 2023). Removal in a minor was allowed because the feature was experimental.
Reasons: without .value it is harder to see what is reactive and what triggers effects; it behaved differently inside and outside SFCs; refs were still needed at function boundaries ($$()), adding a concept; and it risked splitting the ecosystem into two dialects.
On 3.4+ the macros are just undeclared identifiers: the SFC still compiles, then fails at runtime with ReferenceError: $ref is not defined; type-checking reports Cannot find name '$ref'.
Options: migrate to plain ref/computed with .value, or keep the syntax via the Vue Macros plugin. Reactive props destructure is the one piece that survived, stable since 3.5.

Clarifying questions expected:

"Is this a codebase that is still on 3.3, or one that already upgraded and is broken?"
"Do you want the migration path, or the design reasoning?"

Code / implementation expected: Optional — the same counter written with $ref and with ref, and what the compiler does with each.

reactivity-transform
compiler
vue-3.4

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Vue developers maintaining or interviewing about code from the 3.2/3.3 era, and anyone curious why Vue still makes you type .value. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. Dates and the deprecation history come from the vuejs/core changelogs, the Vue blog and the original RFC discussion, linked inline. What happens to old code today was checked by compiling and running it on Vue 3.5.44 and type-checking it with vue-tsc 3.3.13; the Vue Macros output was produced with @vue-macros/reactivity-transform 3.1.4.

1. Why This Even Matters — A Story First

A city once tried an experiment: it removed the painted lines between cycle lanes and car lanes on one street, arguing that drivers and cyclists would read the road better without visual clutter. It did look cleaner. But people new to the street could no

The solution is hidden so you can try first

12 min read · 10 sections

Read the code

VueThe modern equivalent: ref, computed and passing the ref to a composable

Open in playground

<script setup>
import { ref, computed, watch } from "vue";

// Before (Reactivity Transform, removed in 3.4):
//   let count = $ref(0)
//   const double = $computed(() => count * 2)
//   useLogger($$(count))   // $$() was needed to pass the ref itself
// After: plain refs. The .value tells the reader "this is reactive".
const count = ref(0);
const double = computed(() => count.value * 2);

// Passing the ref object into a composable needs no escape hatch: it is just `count`.
function useLogger(source, label) {
  watch(source, (now, before) => console.log(`${label}: ${before} -> ${now}`));
}
useLogger(count, "count");

function increment() {
  count.value++; // explicit: this line triggers effects
}
</script>

<template>
  <!-- templates unwrap top-level refs, so no .value here -->
  <button @click="increment">{{ count }} x 2 = {{ double }}</button>
</template>

VueLegacy Reactivity Transform syntax (compiles on 3.4+, then ReferenceError: $ref is not defined)

<script setup>
// Reactivity Transform syntax (Vue 3.2-3.3, experimental). Removed from core in 3.4.
let count = $ref(0);
const double = $computed(() => count * 2);

function increment() {
  count++;
}
</script>

<template>
  <button @click="increment">{{ count }} x 2 = {{ double }}</button>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.