What is the difference between Options API and Composition API?

Question

Accepted Answer

**Options API** — object-based organization by type. **Composition API** — function-based organization by logic.

**Options API:**
- Organized by option type (data, methods, computed).
- Easy to understand for beginners.
- Code for one feature scattered across options.

**Composition API:**
- Organized by logical concern.
- More flexible and powerful.
- Better code reuse via composables.

```javascript
// Options API
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}
```

```javascript
// Composition API
import { ref } from "vue"
const count = ref(0)
const increment = () => count.value++
```

**Key differences:**
- **Options** — by type, easier to learn.
- **Composition** — by logic, more flexible.

Vue.js: What is the difference between Options API and Composition API?