Interview answer drill

Use this Vue interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more Vue.js interview questions

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

HighIntermediateVue

By FrontendAtlas Team · Updated Apr 10, 2026

Interview focus

This Vue interview question tests whether you can explain Vue Composition API: feature-first organization, composables, and migration trade-offs, connect it to production trade-offs, and handle common follow-up questions.

Vue Composition API: feature-first organization, composables, and migration trade-offs explanation without falling back to memorized docs wording
Composition API and Hooks reasoning, edge cases, and production failure modes
How you would answer the most likely Vue interview follow-up

Practice more Vue.js interview questions

Interview quick answer

Explain the Vue Composition API with an interview and production angle: why Vue introduced it, how setup(), ref(), and reactive() help group one feature in one place, and when migration trade-offs still favor the Options API.

Full interview 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.

Worked scenario: one feature, one composable

Imagine a product-search panel with query state, loading state, result count, keyboard shortcuts, request cleanup, and derived filters. In the Options API, that feature gets split across data, computed, methods, watch, and lifecycle hooks. In the Composition API, you can move the whole feature into one composable and keep the state, effects, and cleanup together.

JAVASCRIPT

// useProductSearch.js
import { ref, computed, watch } from 'vue';

export function useProductSearch(api) {
  const query = ref('');
  const results = ref([]);
  const isLoading = ref(false);
  const resultCount = computed(() => results.value.length);

  watch(query, async (q, _prev, onCleanup) => {
    if (!q.trim()) {
      results.value = [];
      return;
    }

    const ctrl = new AbortController();
    onCleanup(() => ctrl.abort());
    isLoading.value = true;

    try {
      results.value = await api.search(q, { signal: ctrl.signal });
    } finally {
      isLoading.value = false;
    }
  });

  return { query, results, isLoading, resultCount };
}

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.

Migration / when not to force it

A small leaf component with a couple of props and one click handler can stay in the Options API and still be perfectly maintainable. Composition API pays off most when one feature spans state + computed + watch + lifecycle or when you want to reuse that feature across multiple components. Vue lets both styles coexist, so migration can happen incrementally instead of as a rewrite.

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.