Vue Academy · Lesson

Reactivity Fundamentals

Learn how Vue tracks reactive dependencies.

Reactivity Fundamentals is a free Vue Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Reactivity?

Reactivity is Vue automatically updating the DOM when your data changes.

You change a value in JavaScript
Vue detects the change
The view re-renders to match

No manual DOM manipulation required.

How Vue Tracks Dependencies

Vue uses a dependency tracking system.

When a render reads a reactive value, Vue records that dependency
When that value later changes, Vue knows which renders to re-run
This makes updates precise and efficient

ref for Primitives

In the Composition API, ref makes a single value reactive.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref in Templates

In templates, refs are automatically unwrapped, so you skip .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive for Objects

reactive makes an entire object reactive. You access properties directly, no .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref vs reactive

Choosing between them:

ref works for any value (primitives and objects), accessed with .value
reactive only for objects, accessed directly

Many teams prefer ref everywhere for consistency.

The data Option (Vue 2 / Options API)

The Options API uses the data function. Every returned property is reactive.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Reactivity Caveats with Arrays

Direct array index assignment can be tricky, especially in Vue 2.

In Vue 2, setting arr[5] = x did not trigger updates
Vue 3 proxies handle most cases, but care is still wise

Prefer array methods for clarity and safety.

Reactive Array Methods

Mutating methods like push, splice, and pop are tracked reactively.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Replacing vs Mutating

Two ways to update arrays:

Mutate with push, splice, sort
Replace by assigning a new array, e.g. from filter or map

Both trigger reactivity in Vue 3. Replacing is often cleaner for derived lists.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Avoiding Lost Reactivity

Destructuring a reactive object breaks reactivity for those variables.

Pulling a property out copies its current value
Use toRefs to keep reactivity when destructuring

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Quick Check

Test your understanding of Vue reactivity.

Recap: Reactivity Fundamentals

You learned how Vue reactivity works:

Vue tracks which data each render uses
ref makes values reactive (use .value in JS)
reactive makes objects reactive (direct access)
The Options API uses the data function
Use array methods and toRefs to avoid losing reactivity

Next: computed properties.

Frequently asked questions

Is the “Reactivity Fundamentals” lesson free?

Yes — the full text of “Reactivity Fundamentals” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Reactivity Fundamentals”?

Learn how Vue tracks reactive dependencies. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Reactivity Fundamentals” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy