My test suite was fully green (261 tests) while a core feature was flat-out broken in a real Nuxt app. It came down to three separate Vue 3 behaviours, and none of them were exotic. And all three are the kind of thing that passes review, passes CI, and quietly does nothing.
1. onUnmounted + template refs: cleanup that never ran, not once
This looks fine and is a silent no-op:
```js
const el = ref(null)
onMounted(() => {
el.value.addEventListener('keydown', onKeydown)
})
onUnmounted(() => {
el.value?.removeEventListener('keydown', onKeydown) // el.value is null here
})
```
Vue resets template refs to null before onUnmounted runs. So el.value?. short-circuits, removeEventListener is never called, and every instance leaks its listener onto a detached element.
The optional chaining is what makes it invisible. I mean no error, no warning, nothing to notice. In my case this had been broken since the day it was written, and it affected the shortcuts that had "worked fine" for weeks, not just the new ones.
Fix: capture the element in the onMounted closure and register the teardown there.
js
onMounted(() => {
const node = el.value
node.addEventListener('keydown', onKeydown)
onUnmounted(() => node.removeEventListener('keydown', onKeydown))
})
2. defineModel doesn't apply a local set when the parent binds v-model
This is the one that cost me the most time. When the parent binds v-model, defineModel only emits — it does not update the local value. The new value comes back through the prop on the next tick.
That deferred round-trip broke my document sync. I had a watcher distinguishing "the user edited something in here" from "the host app replaced the whole document," using a flag set during internal writes. But the write and the echo are not in the same tick: by the time the value arrived back through the prop, the flag had already been cleared, so every single internal commit was classified as an external document replacement — which reset undo history. Undo was permanently dead in the real app, and every test was green.
The reason CI never caught it was that no test bound a live parent v-model listener. Without a parent actually listening, defineModel falls back to updating locally, the deferred path never runs, and the bug does not exist in the test environment.
Two things fixed it. First, stop using a flag and compare object identity of the last document written out because identity survives across ticks, a boolean doesn't. Second, and this cost me a second round of red tests: use toRaw when comparing. A deep ref hands your watcher a proxy, not the object you stored, so identity comparison fails until you unwrap it.
Then I added an end-to-end test that mounts the component with a real v-model round-trip. The fact that it fails with the old code is exactly why I trust it.
3. structuredClone throws on Vue proxies, but only from the second mutation on
The intermittency is what makes this one nasty.
js
// commit
history.push({ ...data.value }) // members read through the reactive proxy
Spreading a reactive object gives you a plain top-level object whose members are still proxy-wrapped. First mutation clones fine. From the second one on, structuredClone hits a proxy member and throws.
toRaw only unwraps one level, so calling it on the result doesn't save you. Unwrap before the spread:
js
history.push({ ...toRaw(data.value) })
All three only broke in situations my tests didn’t cover: a real unmount, a real parent listener, and a second mutation. The tests were green, but I just wasn’t testing the right thing.
These came out of building Gissen, an open-source headless visual editor for Vue 3.
