When Nothing Changes: Understanding Computed and Non-Reactive Dependencies in Vue

There’s a moment where a computed property feels like it should work—

but doesn’t.

You write something simple:

const count = ref(1)

let multiplier = 2

const result = computed(() => {
  return count.value * multiplier
})

At first, everything behaves.

console.log(result.value) // 2

Then later:

multiplier = 3
console.log(result.value)

And nothing changes.

Still 2.

It feels wrong.

But it reveals something deeper about how Vue actually works.

Not Everything Inside Computed Is Reactive

It’s easy to assume:

“If it’s inside computed, Vue will track it.”

But Vue doesn’t think that way.

It doesn’t look at your code and decide what matters.

Instead, it follows a much stricter rule:

Only reactive access is tracked.

Not variables.

Not logic.

Not intention.

Just access—through the reactivity system.

What Actually Gets Tracked

When the computed runs:

count.value * multiplier

Two things happen.

First:

count.value

This goes through Vue’s system.

It’s reactive.

It has a getter.

It gets tracked.

Then:

multiplier

This is just a plain variable.

No Proxy.

No interception.

No tracking.

So Vue records a dependency on count—

and nothing else.

From Vue’s Perspective

The computed is not:

“count times multiplier”

It is:

“count times something that never changes”

Because as far as Vue can tell—

multiplier is invisible.

When Changes Don’t Exist

So when this happens:

multiplier = 3

Vue doesn’t react.

Not because it’s ignoring you—

but because it never knew this value mattered.

There was nothing to track.

And without tracking—

there is nothing to trigger.

A Computed Without Dependencies

Consider this:

const result = computed(() => Math.random())

At first, it looks dynamic.

But it runs once.

And then never again.

Because nothing inside it is reactive.

No dependencies.

No invalidation.

Just a cached value.

It’s no longer a computation.

It’s a constant.

The Illusion of Reactivity

The tricky part is when you mix both worlds:

const result = computed(() => count.value * multiplier)

Now it reacts—

but only partially.

Changes in count trigger updates.

Changes in multiplier do not.

Which makes it feel like it’s working—

until it isn’t.

Why Vue Works This Way

Vue doesn’t:

• scan variables
• observe closures
• detect assignments

It relies entirely on one mechanism:

Intercepting access through reactive objects

If something doesn’t go through that system—

it simply doesn’t exist in Vue’s world.

Making It Visible

To make multiplier part of the system, it must become reactive:

const multiplier = ref(2)

const result = computed(() => {
  return count.value * multiplier.value
})

Now both values are tracked.

Now both can trigger updates.

Now the relationship is complete.

A Subtle Shift

At this point, it becomes clearer:

A computed property is not:

“A function that runs when something changes”

It is:

A cached value derived from reactive inputs

And if an input is not reactive—

it’s treated as if it never changes at all.

A Final Thought

Reactivity doesn’t come from where your code lives.

It comes from how your data is accessed.

You can write the most dynamic logic inside a computed—

but if it doesn’t touch reactive sources,

Vue sees nothing moving.

And in a system built on observation—

what cannot be seen,

cannot change.