Vue composables: the shared state trap — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 One composable, two counters</h1>
    <p class="pg-sub">
      Both counters below call the <b>same</b> <code>useCounter()</code> composable. Click
      <b>+1</b> on either one and watch what happens to the other. Toggle where the
      <code>ref()</code> lives to see why.
    </p>

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

<div id="app" hidden>
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Where does <code>ref(0)</code> live?</div>
        <div class="btn-row">
          <div class="seg" id="scopeSeg">
            <button aria-pressed="true" data-scope="inside">Inside the function (default)</button>
            <button aria-pressed="false" data-scope="outside">Outside the function (module scope)</button>
          </div>
        </div>
        <p class="hint" id="scopeHint" style="margin-top:12px">
          <code>inside</code>: each call to <code>useCounter()</code> creates its own <code>ref</code> — private state.
        </p>
      </div>

<div class="panel">
        <div class="panel-label"><span class="n">2</span> Two components, one composable</div>
        <div class="counters">
          <div class="counter">
            <h3>Counter A</h3>
            <div class="big-num" id="numA">0</div>
            <button class="btn primary" id="incA">+1 A</button>
          </div>
          <div class="counter">
            <h3>Counter B</h3>
            <div class="big-num" id="numB">0</div>
            <button class="btn primary" id="incB">+1 B</button>
          </div>
          <div class="link-badge private" id="linkBadge">🔒 private — each counter has its own ref</div>
        </div>
        <div class="btn-row" style="margin-top:14px">
          <button class="btn ghost" id="reset">Reset both</button>
        </div>
      </div>

<div class="panel">
        <div class="panel-label"><span class="n">3</span> The composable, right now</div>
        <div class="code" id="codeView"></div>
        <p class="hint" id="resultHint" style="margin-top:10px">Click a counter to see the result narrated here.</p>
      </div>
    </div>
  </div>

preview

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