Vue from Zero - The Framework That Lets You Mutate

Vue has a reputation as the approachable frontend framework, and the reputation is earned - but "approachable" gets mistaken for "shallow," and then developers use Vue for a year without knowing why changing count.value updates the screen. That gap stays fine right up until the day reactivity silently stops working and nothing in your mental model explains it.

This guide builds the model properly: what Vue's reactivity actually is (a tracking system built on proxies), why mutation is the intended way to change data here, and how templates, components, and watchers all hang off that one system. If you've read our React guide, you'll get contrast notes where the two philosophies split; if you haven't, this guide stands on its own.

How to read this

• In a panic right now? Jump to Phase 7: When Vue Breaks - the cheat-card at the top covers the classic "reactivity stopped working" mysteries.
• Want it to finally make sense? Read in order. Phase 3 (reactivity) is the load-bearing wall.

The phases

1. What Vue Actually Is - reactive data + templates that follow it, and the anatomy of a .vue file.
2. Templates That React - {{ }}, :bind, @click, v-if, v-for, and the two-way v-model.
3. Reactivity for Real - ref, reactive, computed, and the traps that silently disconnect your data from the screen.
4. Components: Props, Events, and v-model - building blocks that talk both directions.
5. Slots and Composition - components that wrap content, and composables that package logic.
6. Watchers, Lifecycle, and Fetching - reacting to changes and talking to servers.
7. When Vue Breaks - lost reactivity, forgotten .value, mutated props, and key mistakes, decoded.
8. Where to Go Next - Router, Pinia, Nuxt, and what to skip for now.

Deliberately deferred to follow-up guides: Nuxt and server-side rendering, TypeScript-heavy component patterns, transitions/animation, and testing. The reactivity model comes first; everything else is built on it.