Not What Changed—But What Returned: Understanding How Vue Compares Old vs New in watch

It’s easy to assume what a watcher does.

You give it some data, change that data, and Vue tells you:

“This changed.”

It feels like Vue is looking inside your state, comparing values, figuring out what’s different.

But that’s not what’s happening.

Not even close.

The Illusion of “Change Detection”

Consider this:

watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

At first glance, it looks like Vue is watching count itself.

But it’s not watching the variable.

It’s watching the result of a function.

Even when you pass count directly, Vue internally treats it like:

() => count.value

So the real question becomes:

What does this function return now… compared to before?

Comparison Is Surprisingly Simple

Vue does not perform deep comparisons.

It does not inspect nested properties.

Instead, it does something much simpler:

It compares the new value and the old value using identity.

newVal !== oldVal

That’s it.

If they are different, the watcher runs.

If they are the same, nothing happens.

When This Works Perfectly

With primitives, this feels natural:

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

When count changes from 0 to 1:

• 0 !== 1 → trigger

Clean.

Predictable.

Exactly what you expect.

When It Starts to Break Expectations

Now consider an object:

const state = reactive({ count: 0 })

watch(() => state, () => {
  console.log("changed")
})

Then:

state.count++

Nothing happens.

Why?

Because Vue compares:

newVal === oldVal

They are the same object.

The structure changed—but the reference did not.

And Vue only cares about the reference.

A Subtle Shift

At this point, something becomes clear:

Vue is not asking:

“What changed inside this object?”

It is asking:

“Did the result of this function change?”

That’s a completely different question.

The Role of deep: true

To handle nested changes, Vue offers:

watch(
  () => state,
  callback,
  { deep: true }
)

But this is often misunderstood.

It does not mean:

“Compare deeply.”

Instead, it means:

“Touch everything so it can be tracked.”

Vue internally walks through the object, accessing every nested property.

And because tracking happens on access, it registers dependencies across the entire structure.

Now when state.count changes, the watcher runs.

But something interesting remains.

The Same Old Value

Even with deep: true:

watch(() => state, (newVal, oldVal) => {
  console.log(newVal === oldVal) // true
})

The watcher triggers…

but both values are still the same object.

Vue never cloned anything.

It simply re-ran the function and noticed that something it depends on changed.

So What Is Actually Being Compared?

Not the object.

Not its contents.

Just the return value of the getter.

And for objects, that return value is the same reference.

A More Accurate Model

A watcher is not:

“Watch this data”

It is:

“Run this function, remember its result, and run it again later to see if the result is different”

That’s the entire system.

Where This Becomes Visible

Consider this:

watch(
  () => ({ count: state.count }),
  () => {
    console.log("triggered")
  }
)

This function returns a new object every time.

So even if state.count hasn’t changed, the result is a new reference.

Which means:

newVal !== oldVal

Always true.

So the watcher always triggers.

Not because the data changed—

but because the shape of the return value did.

Why Vue Chooses This Design

Deep comparison sounds nice.

But it comes with a cost:

• expensive traversal
• unpredictable performance
• unnecessary complexity

Instead, Vue chooses something simpler:

Compare cheaply, and track precisely

It doesn’t try to understand your data.

It only observes how your code uses it.

A Final Thought

Watchers don’t detect change in the way we often imagine.

They don’t look inside values.

They don’t compute differences.

They simply remember what a function returned—

and ask, later:

“Is this still the same thing?”

And sometimes, that question is much simpler—

and much more powerful—

than trying to understand what changed at all.