Vue defineModel & the v-model contract — interactive playground

<div class="pg">
  <div class="pg-title">defineModel &amp; the v-model contract</div>
  <p class="pg-sub">
    <code>TitleField</code> wires the exact prop-in / emit-out pair <code>defineModel()</code>
    compiles to, on Vue's real reactivity runtime. Watch the <strong>prop</strong> (parent → child)
    and the <strong>emit</strong> (child → parent) fire as two separate, visible events.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The parent/child boundary</div>
      <div class="boundary">
        <div class="side">
          <h4>Parent — <code>title</code> ref</h4>
          <div class="value-line" id="parent-value">"Untitled"</div>
          <div class="sub">bound with <code>v-model.capitalize="title"</code></div>
        </div>
        <div class="arrow">⇄</div>
        <div class="side">
          <h4>Child — <code>model</code> ref</h4>
          <div class="value-line" id="child-value">"Untitled"</div>
          <div class="sub">from <code>defineModel({ set… })</code> inside TitleField</div>
        </div>
      </div>

<div class="group-label">Type in the child's own input (fires the emit half)</div>
      <div class="row">
        <input id="child-input" type="text" placeholder="Edit as the child…" style="flex:1; min-width:180px;" />
      </div>

<div class="group-label">Or edit from the parent directly (fires the prop half)</div>
      <div class="row">
        <button class="btn" id="btn-parent-set">Parent sets title to "Q4 Report"</button>
        <button class="btn ghost" id="btn-unbind">Unbind v-model (parent stops passing a prop)</button>
        <button class="btn ghost" id="btn-rebind">Re-bind v-model</button>
      </div>

<p class="hint" style="margin-top:10px">
        <span class="pill" id="bound-pill">v-model: bound</span>
        The <code>.capitalize</code> modifier is applied inside the child's <code>set()</code> transform —
        try typing a lowercase word into the child's input. The parent's button never goes through
        <code>set()</code>: a value arriving from the parent is only synced, not transformed.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Timeline</div>
      <p class="hint" style="margin-top:0">
        A child edit logs as an <strong>emit</strong> (child → parent write). A parent edit logs as a
        <strong>prop update</strong> (parent → child sync). Unbinding shows the child's model falling
        back to a local, independently writable ref — the one case where the two sides aren't kept in sync.
      </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.

Vue defineModel &amp; the v-model contract — interactive playground

Vue defineModel & the v-model contract — interactive playground