Is it possible to watch a reference to a div?

[natecorkish]

I am trying to get the value of the iframe body for a hidden input but it doesn't seem to update, is there a way to achieve this?

Trying to get the value of the wysiwyg editor, but it doesn't update.
<span x-text="wysiwyg.contentDocument.body.text"></span>

  <div x-data="app()"
      x-init="init($refs.wysiwyg)"
  
      class="border border-secondary overflow-hidden rounded-md"
  >
      <div class="w-full flex border-b border-secondary text-xl text-primary">
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('bold')">
              b
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('italic')">
              <i>i</i>
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('underline')">
              <u>u</u>
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('formatBlock','P')">
              p
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('formatBlock','H1')">
              h1
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('formatBlock','H2')">
              h2
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 mr-1 hover:text-ternary active:bg-ternary" @click="format('formatBlock','H3')">
              h3
          </span>
          <span class="cursor-pointer text-sm font-bold leading-tight flex items-center justify-center outline-none border-l border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('insertUnorderedList')">
              <svg viewBox="0 0 24 24" class="h-5 w-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
                  <line x1="8" y1="6" x2="21" y2="6"></line>
                  <line x1="8" y1="12" x2="21" y2="12"></line>
                  <line x1="8" y1="18" x2="21" y2="18"></line>
                  <line x1="3" y1="6" x2="3.01" y2="6"></line>
                  <line x1="3" y1="12" x2="3.01" y2="12"></line>
                  <line x1="3" y1="18" x2="3.01" y2="18"></line>
              </svg>
          </span>
          <span class="cursor-pointer text-sm font-bold flex flex-col items-center justify-center outline-none border-r border-secondary w-10 h-10 mr-1 hover:text-ternary active:bg-ternary" @click="format('insertOrderedList')">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
                  <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
              </svg>
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-l border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('justifyLeft')">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
              </svg>
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('justifyCenter')">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
          </span>
          <span class="cursor-pointer text-sm font-bold flex items-center justify-center outline-none border-r border-secondary w-10 h-10 hover:text-ternary active:bg-ternary" @click="format('justifyRight')">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
              </svg>
          </span>
      </div>
      <div class="w-full">
          <span x-text="wysiwyg.contentDocument.body.text"></span>
          <input name="{{ $name }}" type="hidden" x-value="wysiwyg.contentDocument.body.text">
          <iframe x-ref="wysiwyg" class="w-full h-75 overflow-y-auto"></iframe>
      </div>
  </div>
  
  <script>
      function app() {
          return {
              wysiwyg: null,
              init: function(el) {
                  // Get el
                  this.wysiwyg = el;
  
                  this.wysiwyg.contentDocument.querySelector('body').innerHTML = '{{ $value }}'
  
                  // value
                  this.wysiwyg.contentDocument.querySelector('body').setAttribute('x-model', 'text');
  
                  // css
                  this.wysiwyg.contentDocument.querySelector('head').innerHTML += `<style>
                      *, ::after, ::before {box-sizing: border-box;}
                      :root {tab-size: 4;}
                      html {line-height: 1.15;text-size-adjust: 100%;}
                      body {margin: 0px; padding: 1rem 0.5rem;}
                      body {font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";}
                  </style>`;
  
                  // Make editable
                  this.wysiwyg.contentDocument.designMode = "on";
              },
              format: function(cmd, param) {
                  this.wysiwyg.contentDocument.execCommand(cmd, !1, param||null)
              }
          }
      }
  </script>

[Tim-Wils]

Seems like you were pretty close. You have full control over your iframe, so how about a MutationObserver at the end of the init function?
It’s untested because I’m om my phone right now, but does something like this work for you?:

let config = { attributes: true, childList: true };
let callback = function(mutationsList) { console.log(‘iframe contents changed‘) };

// watch the iframe for changes
let observer = new MutationObserver(callback)
observer.observe(this.wysiwyg.contentDocument, config);