You write a custom directive once — v-tooltip , v-click-outside , v-ripple — attach something in mounted() , tear it down in unmounted() , and trust the pair like you'd trust addEventListener / removeEventListener . Then you drop it onto a row inside a filterable v-for list. Filter an item out. No error. No warning. The row disappears from the screen — and on some Vue 3 versions, unmounted() never ran. The listener it attached is still live, attached to a DOM node nothing references anymore. This was a real bug in Vue's own compiler, open for years, fixed only in Vue 3.5.41 — and understanding why it happened teaches you more about how v-for actually works than the fix note ever will.

What You'll Learn

By the end of this article you'll be able to:

Explain why a custom directive's lifecycle hooks can be skipped for an element inside v-for , even though the same directive works fine outside a loop

Reproduce the symptom, confirm whether your installed Vue version is affected, and verify the fix

Describe…