Vue 3 has been stable for over 3 years, but I still see teams default to Options API out of habit. Here's when each actually makes sense.
The Mental Model Shift
Options API groups code by type (data, computed, methods). Composition API groups code by feature. For components with a single responsibility, it doesn't matter. For complex components, Composition API wins clearly.
A Real Example
Consider a product search component with filters, pagination, and debounced API calls. In Options API:
export default {\n data() { return { query: '', results: [], page: 1, loading: false } },\n computed: { hasResults() { return this.results.length > 0 } },\n watch: { query: 'debounceSearch' },\n methods: {\n debounceSearch: debounce(function() { this.search() }, 300),\n async search() { ... }\n }\n}In Composition API:
<script setup>\nconst query = ref('')\nconst { results, loading, search } = useProductSearch(query)\n// All related logic lives in useProductSearch composable\n</script>TypeScript Integration
<script setup> + TypeScript is significantly better than Options API + TypeScript. Props and emits are type-checked by default, and IDE autocomplete is much more reliable.
My Recommendation
Use Composition API with <script setup> for all new code. Only maintain Options API in legacy components where the migration cost isn't worth it.