Vue v-for directive unmounted hook — interactive playground

<div class="pg">
  <div class="pg-title">🎮 The v-for directive unmounted hook bug</div>
  <p class="pg-sub">
    <code>vLog</code> logs <code>mounted</code> / <code>unmounted</code> for each row below, running on
    Vue's real 3.5.43 runtime. Remove a row and watch whether <code>unmounted</code> fires. Flip the
    toggle to compare against a labeled recreation of the pre-3.5.41 symptom.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mode</div>
      <label class="toggle">
        <input type="checkbox" id="buggy-toggle" />
        <span class="switch"></span>
        <span>Simulate pre-3.5.41 symptom (recreation, not real old Vue — see note)</span>
      </label>
      <p class="hint" id="mode-hint" style="margin-top:8px">
        Off: real Vue 3.5.43, real <code>mounted</code>/<code>unmounted</code> hooks on a real keyed
        <code>v-for</code>. Every removal logs <code>unmounted</code>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> A keyed v-for list, each row carrying <code>v-log</code></div>
      <div class="btn-row">
        <button class="btn primary" id="btn-add">Add row</button>
        <button class="btn ghost" id="btn-remove-random">Remove a random row</button>
        <button class="btn ghost" id="btn-reset">Reset list</button>
      </div>
      <div class="rows" id="rows"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Directive lifecycle log</div>
      <p class="hint" style="margin-top:0">
        Each row logs <strong>mounted</strong> once, when added, and should log <strong>unmounted</strong>
        exactly once, when removed. In the simulated buggy mode, watch <code>unmounted</code> stop
        appearing — silently, with no error — even though the row still visibly disappears above.
      </p>
      <div class="log" id="log" aria-live="polite"></div>
    </div>

</div>
</div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.