Vue reactivity: ref vs reactive — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Vue reactivity: watch the subscription</h1>
    <p class="pg-sub">
      Four counters. Two update the screen, two change their data and leave the screen alone.
      Click the <b>+1</b> buttons and compare the two numbers in each row: <b>screen</b> is what
      a render wrote, <b>data</b> is what the value actually is right now. Where they drift apart,
      Vue was never subscribed to the thing you changed.
    </p>

<div class="banner info" id="boot">Loading the real Vue reactivity runtime (3.5.41) from the CDN…</div>

<div class="panel" id="app" hidden>
      <div class="panel-label"><span class="n">1</span> Four counters</div>
      <div class="rows">

<div class="row alive" id="row-a">
          <div>
            <h3><span class="pill">A</span> <code>ref(0)</code> → <code>a.value++</code></h3>
            <p class="why">The value lives behind a property, so reading it is a property access — trackable.</p>
          </div>
          <div class="nums">
            <div class="num screen"><b data-screen="a">0</b><span>screen</span></div>
            <div class="num"><b data-data="a">0</b><span>data</span></div>
            <div class="num"><b data-renders="a">0</b><span>renders</span></div>
          </div>
          <div class="verdict"><span class="status good"><span class="dot"></span><span data-verdict="a">in sync</span></span></div>
        </div>

<div class="row alive" id="row-b">
          <div>
            <h3><span class="pill">B</span> <code>reactive({count:0})</code> → <code>b.count++</code></h3>
            <p class="why">A property access on the proxy, read inside the effect. Subscription created, then written to.</p>
          </div>
          <div class="nums">
            <div class="num screen"><b data-screen="b">0</b><span>screen</span></div>
            <div class="num"><b data-data="b">0</b><span>data</span></div>
            <div class="num"><b data-renders="b">0</b><span>renders</span></div>
          </div>
          <div class="verdict"><span class="status good"><span class="dot"></span><span data-verdict="b">in sync</span></span></div>
        </div>

<div class="row dead" id="row-c">
          <div>
            <h3><span class="pill">C</span> <code>let { count } = reactive(…)</code> → <code>count++</code></h3>
            <p class="why">Destructuring copied the number out during setup — outside any effect. There was never a subscription to create.</p>
          </div>
          <div class="nums">
            <div class="num screen stale"><b data-screen="c">0</b><span>screen</span></div>
            <div class="num"><b data-data="c">0</b><span>data</span></div>
            <div class="num"><b data-renders="c">0</b><span>renders</span></div>
          </div>
          <div class="verdict"><span class="status bad"><span class="dot"></span><span data-verdict="c">data moved, screen didn't</span></span></div>
        </div>

<div class="row dead" id="row-d">
          <div>
            <h3><span class="pill">D</span> <code>d = { count: d.count + 1 }</code></h3>
            <p class="why">The effect subscribed to <code>count</code> <em>on that proxy</em>. Reassigning the variable leaves every subscriber pointed at the old object.</p>
          </div>
          <div class="nums">
            <div class="num screen stale"><b data-screen="d">0</b><span>screen</span></div>
            <div class="num"><b data-data="d">0</b><span>data</span></div>
            <div class="num"><b data-renders="d">0</b><span>renders</span></div>
          </div>
          <div class="verdict"><span class="status bad"><span class="dot"></span><span data-verdict="d">data moved, screen didn't</span></span></div>
        </div>

</div>

<div class="btn-row" style="margin-top:14px">
        <button class="btn primary" data-inc="a">+1 A</button>
        <button class="btn primary" data-inc="b">+1 B</button>
        <button class="btn" data-inc="c">+1 C</button>
        <button class="btn" data-inc="d">+1 D</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" id="all">Click all four once</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="fix" />
          <span class="switch"></span>
          <span>Fix C and D (<code>toRefs</code> / <code>ref</code>)</span>
        </label>
      </div>

<p class="hint" id="fixhint" style="margin-top:10px">
        Flip the switch to rebuild C with <code>toRefs(state)</code> and D as a <code>ref</code> holding the
        object. Same clicks, same arithmetic — the difference is only <em>where the write lands</em>.
      </p>
    </div>

<div class="panel" id="logpanel" hidden>
      <div class="panel-label"><span class="n">2</span> What re-ran, and why</div>
      <p class="hint" style="margin-top:0">
        Every line is one real <code>watchEffect</code> re-run — Vue deciding, on its own, that an
        effect's dependency changed. Notice C and D never appear until you flip the fix.
      </p>
      <div class="log" id="log" aria-live="polite"></div>
    </div>

<div class="panel" id="codepanel" hidden>
      <div class="panel-label"><span class="n">3</span> The rule, in one sentence</div>
      <div class="code">Reactivity is a <span class="hl">subscription between one property and one effect</span>,
created when the effect <span class="tok-kw">reads</span> the property.

<span class="tok-cmt">// no read inside an effect → no subscription</span>
<span class="tok-cmt">// wrote to a different object → nobody was listening</span></div>
    </div>
  </div>

preview

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