Why reactive Can’t See Numbers: Understanding Primitives in Vue’s Reactivity System

At some point, you try something that feels like it should work:

const count = reactive(0)

It looks reasonable.

You’re giving Vue a value and asking it to make it reactive.

But it doesn’t work.

And the reason is not a limitation of Vue alone—

it’s a limitation of how JavaScript itself works.

Reactivity Is About Observation

Vue’s reactivity system is built on a simple idea:

Observe when something is accessed.

React when something changes.

But there’s a catch.

To observe something, there must be something to observe.

Not just a value—

but a structure.

Objects Have Structure

When you write:

const state = reactive({
  count: 0
})

Vue wraps that object in a Proxy.

This allows it to intercept:

• when state.count is read
• when state.count is written

There’s a clear relationship:

• target → state
• key → "count"

And that’s enough for Vue to track and react.

Primitives Don’t

Now compare that to a primitive:

let count = 0

There is no structure here.

No keys.

No properties.

No access path like something.count.

It’s just a value.

And that’s the problem.

Nothing to Intercept

Vue’s reactivity depends on intercepting operations like:

• get → when a property is accessed
• set → when a property is changed

But with a primitive, there is nothing to intercept.

There is no count.value by default.

No object wrapper.

No key to track.

Just a number.

And a number alone cannot be observed.

The Role of ref

This is where ref comes in.

Instead of trying to make the primitive reactive directly, Vue creates a structure around it:

const count = ref(0)

Internally, this behaves like:

{
  value: 0
}

Now, suddenly, everything changes.

There is a property—value.

There is a target and a key.

And Vue can finally do what it needs:

Track when value is read.

Trigger updates when value changes.

A Subtle Shift

What ref really does is not just “make a primitive reactive.”

It gives that primitive a shape.

A form that Vue can observe.

Without that shape, reactivity has nothing to attach to.

Why Not Hide This?

You might wonder:

Why doesn’t Vue just handle primitives automatically?

Why not make reactive(0) work?

Because that would blur an important distinction.

Vue keeps the model explicit:

• objects are observed through reactive
• primitives are wrapped through ref

This clarity helps you understand what’s actually happening.

Two Ways of Thinking

At this point, the difference becomes clearer.

reactive says:

“I will observe your existing structure.”

ref says:

“I will create a structure so I can observe you.”

They solve the same problem—

but from opposite directions.

A Final Thought

Reactivity is often described as tracking values.

But that’s not entirely true.

It doesn’t track values directly.

It tracks access to properties.

And primitives…

don’t have properties.

So Vue doesn’t fail to make them reactive.

It simply has nothing to work with—

until you give it something to hold onto.