Master–detail UIs combine a selectable list with a panel showing the active item. Vue tracks list rows with :key on v-for—use stable ids from your data, not array index when order can change.
Selection state
Keep selectedId (or the whole selected object) in a ref. Derive the detail record with computed so the detail panel always reflects list state without duplicate copies.
Keys and focus
Wrong keys make Vue reuse DOM nodes incorrectly—inputs lose focus, animation glitches, and internal state sticks to the wrong row. Prefer item.id from your API.
Compared to React
React’s key prop on list children solves the same reconciliation problem. Both frameworks need stable identity per row.
Self-check
- Why is index a risky key when items reorder?
- Where should selected item data live—list row state or parent ref?
Tip: Derive the detail panel with computed from selectedId so list and detail never drift out of sync.
Interview prep
- Why do :key values matter?
Keys identify vnode identity across updates—stable ids prevent wrong DOM reuse, lost focus, and stale row state when lists reorder.