Vue.js Developer interview question · Most asked
Options API or Composition API: what is the difference, and which would you use?
Summary
The Options API organises a component by option type (data, computed, methods, watch); the Composition API organises it by logical concern using functions (ref, computed, watch) inside setup() or <script setup>. Both are fully supported in Vue 3; the Composition API scales better for complex components, reuse (composables) and TypeScript.
Longer Answer
In a large Options API component, the code for one feature (say, search) is spread across data, computed, watch and methods; with the Composition API it sits together and can be extracted into a composable such as useSearch(). The Composition API also gives better type inference and avoids this.
The Options API is still fine for simple components and for teams coming from Vue 2. Mixing styles in one codebase works but is harder to maintain; most new Vue 3 projects use <script setup> with the Composition API.
Key Points
- Options: grouped by option type.
- Composition: grouped by concern.
- Composables for reuse.
- Better TypeScript with Composition.
Explanation
What interviewers look for
A practical reason for preferring one (organisation by concern, reuse, typing), not just 'Composition is newer'.
More most-asked Vue.js Developer questions
- How do you use Vue Router: dynamic routes, nested routes and navigation guards?
- What are composables, and why did they replace mixins?
- computed, watch or watchEffect: when do you use each?
- ref or reactive: what is the difference, and when do you use each?
- How does Vue 3's reactivity system work, and how does it differ from Vue 2's?
- Why does v-for need a key, and why should it not be the index?
- How do props work, and what is one-way data flow?
- Pinia or Vuex: what is the difference, and why is Pinia now recommended?