What are Vue Composition APIs (setup(), ref, reactive) and why were they introduced?

HighIntermediateVue

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

Explain the Vue Composition API with an interview and production angle: why Vue introduced it, how setup(), ref(), and reactive() improve large-component organization, and which migration trade-offs matter.

Answer

Overview

The Composition API is not just new syntax. In production and in interviews, its value is architectural: it lets you group one feature's state, effects, and derived values together instead of scattering them across Options API sections. That makes large components easier to reason about, reuse through composables, and scale with TypeScript.

Why the Composition API Was Introduced
In large applications, the Options API (using data, methods, computed, etc.) often leads to scattered logic — related code gets separated into different options, making it harder to maintain and reuse. The Composition API solves this by allowing developers to group related logic together using plain JavaScript functions.

JAVASCRIPT

// Example of Composition API
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    return { count, increment };
  }
};
</script>

Key Concepts in the Composition API

1. setup() Function
The setup() function is the entry point of the Composition API. It runs before the component is created and is used to declare reactive state, computed properties, watchers, and lifecycle hooks.

Anything returned from setup() becomes available in the component template.

JAVASCRIPT

setup() {
  const name = ref('Mina');
  const greet = () => console.log(`Hello, ${name.value}!`);

  return { name, greet };
}

2. ref()
ref() creates a reactive reference to a primitive value (like numbers, strings, or booleans). When you update ref.value, Vue automatically tracks and re-renders any parts of the UI that depend on it.

JAVASCRIPT

const message = ref('Hello');
message.value = 'Hi there!';

3. reactive()
reactive() creates a reactive object instead of a primitive. It’s ideal for tracking multiple properties within an object or array.

JAVASCRIPT

const user = reactive({ name: 'Alice', age: 25 });
user.age++; // Triggers reactivity automatically

4. Combining ref() and reactive()
You can combine both approaches — use ref() for single values and reactive() for complex objects. They can also be mixed within the same component for flexibility.

JAVASCRIPT

const count = ref(0);
const user = reactive({ name: 'Mina', score: 10 });

Advantages of the Composition API

Better logic organization and reuse through composable functions.
Improved TypeScript support and static analysis.
Cleaner separation of concerns for large components.
Fully compatible with existing Options API — both can coexist in the same project.

Think of the Composition API as building blocks: instead of being restricted to predefined sections (data, methods, computed), you freely compose logic like LEGO pieces — reusable, organized, and scalable.

Summary

Summary

setup() is the core entry point for the Composition API.
ref() makes primitive values reactive.
reactive() makes entire objects reactive.
Introduced to improve reusability, readability, and TypeScript compatibility.