Not When Data Changes—But When It’s Read: Understanding Dependency Collection vs Triggering in Vue

It’s tempting to think of Vue’s reactivity like this:

“When data changes, Vue updates the UI.”

That sounds right.

But it hides something important.

Because Vue doesn’t actually react to data directly.

It reacts to relationships—relationships that only exist because of two quiet phases:

Dependency collection, and triggering.

To understand Vue, you have to see both.

Nothing Happens When Data Changes

Start with something simple:

const count = ref(0)

count.value++

Nothing happens.

No UI update.

No reaction.

No side effect.

Which is strange, if you think Vue is “watching” your data.

But Vue isn’t watching anything.

Not yet.

The Missing Moment

Now place the same value inside a template:

<template>
  <p>{{ count }}</p>
</template>

Now something changes.

When count updates, the UI updates too.

So what’s different?

Not the data.

The difference is:

The value was used

And that’s where everything begins.

Dependency Collection: When Use Becomes a Relationship

When Vue renders your template, it doesn’t just produce HTML.

It runs a function.

Something like:

function render() {
  return count.value
}

And while this function runs, Vue is quietly observing.

So when this line executes:

count.value

Vue records a relationship:

“This render function depends on count”

That’s dependency collection.

Not scanning code.

Not analyzing structure.

Just noticing:

“This value was accessed, right now, during execution”

And remembering it.

Not Everything Gets Collected

Now consider this:

<template>
  <p v-if="show">{{ count }}</p>
</template>

If show is false, then the render function behaves like:

function render() {
  if (show.value) {
    return count.value
  }
}

But since the condition is false:

• show.value is accessed
• count.value is not

So Vue records:

render depends on show

Even though count exists in the template.

Even though it could run.

It didn’t.

And that’s enough.

Triggering: When Relationships Are Used

Now later:

count.value++

Vue doesn’t ask:

“What changed?”

It asks:

“Who depends on this?”

If no one ever used count, then no one depends on it.

So nothing happens.

But once count has been accessed during a render, Vue has a record:

count → render function

Now when it changes:

Vue re-runs the render

That’s triggering.

Not detection.

Not observation.

Just:

“You used this before, so I’ll run you again”

Read vs Write

At this point, the system becomes clearer.

There are only two moments that matter:

When something is read, and when something is written.

Reading creates the relationship.

Writing uses it.

The Shape of the System

If you compress everything, Vue is doing something surprisingly small:

During render:

“What did you read?”

During update:

“Who read this before?”

That’s it.

No magic.

No hidden watchers scanning your state.

Just a graph that is built as your code runs.

Why It Works This Way

You might wonder why Vue doesn’t just track everything automatically.

Why not track all variables in the template?

Because that would mean:

• tracking values that are never used
• triggering updates that don’t matter
• losing precision

Instead, Vue chooses something more dynamic:

Track only what actually happened

Not what could happen.

A Subtle Shift in Thinking

It’s easy to say:

“Vue tracks data”

But that’s not quite true.

Vue tracks access to data

And that small shift explains everything:

• why v-if changes dependencies
• why unused values don’t trigger updates
• why destructuring can break reactivity

Because without access—

there is nothing to collect.

And without collection—

there is nothing to trigger.

A Final Thought

Reactivity isn’t about values changing.

It’s about relationships being formed, and then honored later.

First, Vue listens to what your code touches.

Then, when something changes, it remembers:

“You cared about this once”

And gives your code a chance to care again.