From Components to Composability: Understanding the Shift from Vue 2 to Vue 3

At first glance, Vue 3 doesn’t feel radically different.

Templates still look familiar.

Components still exist.

Reactivity still works.

So it’s tempting to think:

“This is just an upgraded version of Vue 2.”

But under the surface, something fundamental has changed.

Not just in features—

but in how Vue expects you to think about building applications.

When Components Start to Feel Heavy

Vue 2 introduced a clean and approachable way to build UI.

You had a structure:

• data
• methods
• computed
• watchers

Everything had its place.

And for small to medium components, it worked beautifully.

But as components grew, something subtle happened.

Logic became scattered.

A single feature might be split across:

• data for state
• methods for actions
• computed for derived values
• watch for side effects

Understanding one piece of behavior meant jumping between multiple sections.

Not because the system was broken—

but because it was organized by type, not by purpose.

A Different Question Emerges

As applications scaled, the real question changed.

It was no longer:

“How do we organize component options?”

But:

“How do we organize logic in a way that scales?”

And that question led to Vue 3.

The Shift to Composition

Vue 3 introduces the Composition API.

Not as a replacement—

but as a new way of structuring code.

Instead of separating logic by categories, you group it by intent.

setup() {
  const count = ref(0)

  function increment() {
    count.value++
  }

  return { count, increment }
}

Everything related to one feature lives together.

State.

Behavior.

Dependencies.

No jumping between sections.

Just one cohesive unit.

Why This Changes Everything

This shift seems small at first.

But it unlocks something powerful.

Because once logic is grouped by purpose…

it becomes easier to extract.

To reuse.

To reason about.

Instead of sharing behavior through mixins—where origins can be unclear—

you can create composable functions.

Clear inputs.

Clear outputs.

No hidden dependencies.

The structure becomes explicit.

Reactivity, Reimagined

Underneath this change is a new reactivity system.

Vue 2 relied on Object.defineProperty.

It worked—but had limitations.

Adding new properties was tricky.

Arrays had edge cases.

Vue 3 replaces this with Proxy.

And suddenly:

• dynamic properties are tracked naturally
• arrays behave more intuitively
• reactivity feels closer to plain JavaScript

It’s not just an upgrade.

It’s a removal of friction.

Performance Without Visibility

Some improvements are less visible.

Vue 3 is faster.

More efficient.

Smaller in size.

But what matters is not just speed—

it’s how the system uses that speed.

More precise updates.

Smarter rendering.

Better use of resources.

All without changing how you write templates.

A More Flexible Structure

Other changes reinforce this direction.

Multiple root elements are now allowed.

Teleport lets components render outside their hierarchy.

TypeScript support feels natural instead of forced.

Each of these removes a constraint that previously required workarounds.

And together, they make the system feel less rigid.

Not a Replacement, But an Expansion

What’s interesting is that Vue 3 doesn’t discard Vue 2’s approach.

The Options API still exists.

Still works.

Still makes sense for many cases.

But now there’s another option.

A way to scale when complexity grows.

A Subtle Shift in Philosophy

Vue 2 asked you to think in components.

Vue 3 asks you to think in composable pieces of logic.

Components are still there.

But they are no longer the only unit of organization.

And that shift changes how applications are built.

A Final Thought

The difference between Vue 2 and Vue 3 is not just technical.

It’s conceptual.

One organizes code by structure.

The other organizes it by behavior.

And once you start seeing your application as a collection of composable ideas—

rather than isolated components—

the way you write code begins to change.

Not all at once.

But gradually.

And that’s where Vue 3 reveals what it really is.

Not just a new version.

But a different way of thinking.