# Composition API (Vue.js / Nuxt.js)

> Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup

- 24 interview questions
- Mid-Level
- [Interview Questions: Vue.js / Nuxt.js](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions.md)

## 1. What is the Composition API in Vue 3?

**Answer**

The Composition API is a new way to organize Vue component logic using composition functions instead of options (data, methods, computed). It allows grouping logic by feature rather than by option type, facilitating code reuse through composables. It also provides better TypeScript support and better organization for complex components.

## 2. What is the main function used in the Composition API to define a component's logic?

**Answer**

The setup() function is the entry point of the Composition API. It executes before component creation, even before created(). It receives props and context as arguments and must return an object containing data and functions to expose to the template. It's in setup() where we use ref, reactive, computed, watch and the Composition API lifecycle hooks.

## 3. What is the main difference between ref() and reactive()?

**Answer**

ref() creates a reactive reference for a primitive value or object, accessible via .value in script (but auto-unwrapped in templates). reactive() creates a reactive proxy for objects and arrays only, without requiring .value but loses reactivity if destructured. ref() is more versatile for primitives, reactive() is more natural for complex objects but requires toRef/toRefs for destructuring.

## 21 more questions available

- How to access the value of a ref in the setup() function?
- How to create a computed property in the Composition API?

Sign up for free: https://sharpskill.dev/en/login

## Other Vue.js / Nuxt.js interview topics

- [JavaScript Fundamentals](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20 questions, Junior
- [Modern JavaScript (ES6+)](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20 questions, Junior
- [Vue Basics](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-basics.md): 22 questions, Junior
- [Vue Components](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-components.md): 20 questions, Junior
- [Vue Router](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-router.md): 18 questions, Junior
- [Pinia State Management](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20 questions, Junior
- [Vuex (Legacy)](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15 questions, Mid-Level
- [Vue Reactivity](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20 questions, Mid-Level
- [Nuxt Fundamentals](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22 questions, Mid-Level
- [Nuxt Data Fetching](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20 questions, Mid-Level
- [Nuxt SSR & SSG](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22 questions, Mid-Level
- [Nuxt Server Routes](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20 questions, Mid-Level
- [Nuxt Modules](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18 questions, Mid-Level
- [Vue Composables](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-composables.md): 20 questions, Mid-Level
- [Vue Forms & Validation](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20 questions, Mid-Level
- [Nuxt State Management](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18 questions, Mid-Level
- [Vue Testing](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-testing.md): 20 questions, Mid-Level
- [Nuxt Deployment & CI/CD](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22 questions, Mid-Level
- [Vue Performance](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-performance.md): 22 questions, Senior
- [Vue Advanced Patterns](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24 questions, Senior
- [TypeScript with Vue](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22 questions, Senior
- [Nuxt Authentication](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20 questions, Senior
- [SEO with Nuxt](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20 questions, Senior
- [Nuxt Internationalization](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18 questions, Senior
- [Vue Architecture](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22 questions, Senior
- [Nuxt Security](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20 questions, Senior
- [Vue Ecosystem](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18 questions, Senior
- [Migration Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22 questions, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/en/technologies/vue-nuxt/interview-questions/composition-api