# Vue Options

> Vue 3 Options API — data, props, computed, methods, watch, emits, provide/inject, lifecycle hooks, and mixins. Use when the project uses Options API style (Vue 2 legacy or explicit Vue 3 Options API preference). Use when this capability is needed.

- Skill: `tomevault-io/vue-options` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-options`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-options/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vue-options

---


# Vue Options API

> Use this skill for Vue projects written in **Options API** style.
> For new Vue 3 projects, prefer the `vue` skill (Composition API with `<script setup>`).

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| State: data, computed, methods, watch | Reactive state, derived values, event handlers, side effects | [state](references/state.md) |
| Props & Emits | Receiving data from parent, emitting events to parent | [props-emits](references/props-emits.md) |
| Lifecycle Hooks | Component creation, mounting, updating, unmounting | [lifecycle](references/lifecycle.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| provide / inject | Dependency injection across deep component trees | [provide-inject](references/provide-inject.md) |
| Mixins | Reusable logic shared across components (use with caution) | [mixins](references/mixins.md) |

## Quick Reference

### Full SFC Template

```vue
<script>
export default {
  name: 'MyComponent',

  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },

  emits: ['update'],

  data() {
    return {
      localCount: this.count
    }
  },

  computed: {
    doubled() {
      return this.localCount * 2
    }
  },

  watch: {
    count(newVal) {
      this.localCount = newVal
    }
  },

  methods: {
    increment() {
      this.localCount++
      this.$emit('update', this.localCount)
    }
  },

  mounted() {
    console.log('Component mounted')
  }
}
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ localCount }} | Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
```

### Key Rules

- `data` must be a **function** (not an object) to avoid shared state across instances.
- `computed` properties are **cached** — only recompute when dependencies change.
- Use `watch` for **side effects** (API calls, logging), not for deriving state.
- Declare all `emits` explicitly to document the component's contract.
- Avoid `mixins` in new code — prefer composables (Composition API) for reuse.

---
> Source: [vuluu2k/skills](https://github.com/vuluu2k/skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-04-19 -->