Options API

Options API structures components with `data`, `props`, `computed`, `methods`, `watch`, `emits`, and lifecycle hooks as object keys. Vue binds `this` and wires reactivity behind those options.

| Option | Role | |--------|------| | data | Local reactive state factory | | computed | Cached derived values | | methods | Event handlers and imperative actions | | watch | Side effects on dependency changes |

Still common in legacy codebases and fine for small components. Vue 3 supports both styles in one project.

On interviews: explain that Options API is not deprecated — choice is about colocation versus scattering related logic across option keys.

Common pitfalls: arrow functions in `methods` breaking `this`, mutating props, and giant `data` objects without extraction.

The trade-off is familiar option keys for small components versus scattering related logic across the object for complex features.

Checklist:

• Keep components small or migrate hot paths to Composition.
• Use computed for derived state, not duplicate data.
• Name emits explicitly for parent contracts.
• Know lifecycle order for side effects.