Sua página PHP.
Agora reativa.
Sem npm.

<div x-data="produto">
  <h2 x-bind="{nome}"></h2>
  <p  x-bind="R$ {preco}"></p>

  <div x-if="ativo">✅ Disponível</div>
  <div x-if="!ativo">❌ Indisponível</div>
</div>

<input x-model="produto.nome">

<script>
  proxy.initProxy();

  proxy.template.produto.nome  = "Coxinha Supreme";
  proxy.template.produto.preco = 9.90;
  proxy.template.produto.ativo = true;
</script>

<div x-data="tarefas">
  <div x-for="item, k in lista">
    <span x-bind="{item.texto}"></span>
    <button x-on:click="toggle(k)">✓</button>
    <button x-on:click="remove(k)">✕</button>
  </div>
</div>

<script>
  proxy.initProxy();

  proxy.template.tarefas.lista = [
    { texto: "Aprender shadow-proxy", done: false },
    { texto: "Refatorar o projeto", done: false },
  ];

  proxy.template.tarefas.toggle = function(k) {
    proxy.template.tarefas.lista[k].done
      = !proxy.template.tarefas.lista[k].done;
  };
</script>

<div x-data="contador">
  <h2 x-bind="{valor}"></h2>
</div>

<input type="range" x-model="contador.valor">

<script>
  proxy.initProxy();
  proxy.template.contador.valor = 50;

  // Observa qualquer mudança no valor
  proxy.on('contador.valor', (novo, velho) => {
    console.log(`${velho} → ${novo}`);
  });
</script>