dhpk-vue-2-noteslisted
Install: claude install-skill hmj1026/dhpk
# Vue 2 — Options API baseline
Targets `vue ^2.5.17`. **Options API only** — the Composition API
(`setup()`, `ref`, `reactive`, `<script setup>`) does not exist here;
it arrives in 2.7 as a backport and is the default in Vue 3.
> SFCs (`.vue`) are compiled by `vue-loader` driven by Laravel Mix
> (webpack 4). Source lives under `resources/assets/js`. See the
> `laravel` family skill's `mix` selector for the build wiring.
---
## Signature features
### Options API component structure
```js
export default {
name: 'OrderTicket',
props: {
order: { type: Object, required: true },
compact: { type: Boolean, default: false },
},
// data MUST be a function returning a fresh object, so each
// component instance gets its own state (not a shared reference).
data() {
return {
expanded: false,
note: '',
};
},
computed: {
// cached, re-evaluated only when a reactive dependency changes
title() {
return this.compact ? this.order.no : this.order.fullName;
},
},
methods: {
toggle() {
this.expanded = !this.expanded;
},
},
watch: {
// imperative side effects on a value change
'order.status'(next, prev) {
if (next === '6') this.$emit('done', this.order.id);
},
},
created() {
// instance + reactivity ready; DOM NOT yet mounted
},
mounted() {
// DOM availa