These are two ways to write Vue components. The Options API organizes code by option type (data, methods, computed); the Composition API organizes code by logical concern using functions like ref, , and .
These are two ways to write Vue components. The Options API organizes code by option type (data, methods, computed); the Composition API organizes code by logical concern using functions like ref, , and .
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Everything is grouped into fixed buckets (data, methods, computed, lifecycle). Simple and discoverable, but a single feature's logic gets scattered across those buckets.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
State, computed, methods, and lifecycle for one concern sit together, and <script setup> makes it concise (no this, no return).
The Composition API lets you extract and reuse stateful logic as plain functions (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
This cleanly solves logic-reuse, which was awkward in the Options API (mixins had naming collisions and unclear sources).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
The Composition API (with <script setup>) is the recommended default for new Vue 3 projects, especially with TypeScript.
The Composition API is Vue 3's answer to organizing and reusing component logic.
Understanding that it groups code by feature (not by option type) and enables composables — versus the Options API's option-based buckets — explains the modern Vue style and why complex components and TypeScript codebases favor it.
Both are fully supported; you can even mix them.