English for Vue Developers

Vue’s shift from the Options API to the Composition API changed not just how code is written but how teams talk about it. Terms like “reactive reference,” “composable,” and “prop drilling” now dominate Vue code reviews and design discussions. This guide covers the English vocabulary for talking through Vue components with confidence.

Key Vocabulary

Reactive reference (ref) — a reactive value created with ref(), accessed and mutated through its .value property inside script code, and unwrapped automatically in templates. “Don’t destructure that ref directly in the parent — you’ll lose reactivity; either keep it as an object property or use toRefs.”

Composable — a function that encapsulates and reuses stateful, reactive logic (often prefixed use, like useFetch), Vue’s equivalent of a React custom hook. “Pull that pagination logic out into its own composable so both the table and the card view can share it.”

Single-file component (SFC) — a .vue file combining template, script, and scoped style in one place, compiled into a JavaScript component at build time. “Keep the SFC’s script section focused on logic — if the template’s getting hard to scan, that’s usually a sign to split into a child component.”

Prop drilling — passing data through several layers of components that don’t use it themselves, just to reach a deeply nested child. “We’re prop drilling the user object through four components — this is a good candidate for provide/inject instead.”

Watcher — a function (watch or watchEffect) that runs side effects in response to reactive state changes, distinct from computed properties which derive and cache a value. “Don’t reach for a watcher here — this value is purely derived from other state, so a computed property is the cleaner fit.”

Scoped slot — a slot that lets the child component pass data back up to the parent’s slot content, enabling flexible, data-driven template composition. “Expose the row data through a scoped slot instead of hardcoding the column markup — that way consumers can customize the cell rendering themselves.”

Common Phrases

• “Is this state actually reactive, or did we lose reactivity by destructuring the ref?”
• “Should this logic live in a composable so other components can reuse it?”
• “Are we watching this value when a computed property would be simpler and more predictable?”
• “How deep is this prop being drilled — is it time for provide/inject or a store?”
• “Does this scoped slot expose enough data for consumers to customize the row without forking the component?”

Example Sentences

Reviewing a pull request: “This composable is calling onMounted internally, which means it only works inside a component’s setup — worth a comment so nobody tries to call it from a plain utility file.”

Explaining a design decision: “We moved the shared cart logic into a Pinia store instead of prop-drilling it through three levels, since two unrelated pages both need to read and mutate it.”

Describing an incident: “The stale UI bug came from destructuring a ref in the parent component — the child kept the original snapshot instead of a live reactive reference.”

Professional Tips

• Say “composable”, not “hook,” when discussing Vue-specific reusable logic — it signals you know the framework’s own terminology, not just React’s.
• Distinguish “computed” from “watcher” explicitly in review comments — reviewers often flag watchers used where a derived value would be simpler and less error-prone.
• Use “unwrap the ref” to describe accessing .value — it’s precise shorthand experienced Vue developers recognize instantly.
• When proposing a refactor, name the target pattern explicitly — “provide/inject” or “a Pinia store” — rather than saying vaguely “share the state better.”

Practice Exercise

1. Explain in two sentences why destructuring a ref can break reactivity.
2. Write a one-sentence code review comment suggesting a composable extraction.
3. Describe, in your own words, the difference between a computed property and a watcher.