Options API: data methods computed
Define reactive data, write methods called from the template, and use computed properties for derived values that update automatically.
Options API: data methods computed is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is the Options API?
The Options API organises component logic by option type: data (reactive state), methods (functions), computed (derived state), watch (side effects), lifecycle hooks. Each goes in a named object property.
The data Option
Returns an object of reactive properties. All properties declared in data() are reactive — Vue observes them and re-renders the template when they change.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}The methods Option
Functions that can be called from the template or other methods. Inside methods, this refers to the component instance and provides access to data and computed properties.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}The computed Option
Computed properties derive values from reactive data. They're cached — they only recalculate when their dependencies change. Use them instead of methods for derived values to avoid unnecessary recalculation.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Writable Computed Properties
A computed can have get and set to make it writable — useful for two-way bindings with v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}The watch Option
Watchers run side effects when a reactive property changes. Use them for async operations triggered by data changes (like fetching when a search term changes).
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Lifecycle Hooks in Options API
Declare lifecycle hooks as methods: created, mounted, updated, unmounted. created runs before the DOM is ready. mounted runs after the component is in the DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Template Access: $refs
Add a ref attribute to a template element and access the DOM element or child component via this.$refs.name in methods. Available after mounting.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins vs Composition API
The Options API has mixins for sharing logic between components. Mixins are largely replaced by composables in the Composition API — they're harder to reason about and have namespace collision issues. Prefer Composition API for new code.
Options API vs Composition API
Options API is great for small-to-medium components and is easier to learn for beginners. Composition API (setup() /