I’m having trouble getting Alpinejs to “shadow” and “track” assigns in my live component. For instance using an example from Integrating Phoenix LiveView with JavaScript and AlpineJS I am not getting the expected behavior. My “assigns count” shows up and increments/decrements as it should, but I get nothing for the “alpine count”. Edit to add: I’m actually noticing now that the “alpine count” is actually rendering correctly for a split second on load, but disappears after. phx-update="ignore" does make it stay but I loose the ability to increment/decrement the count.

 <div id="counter"
      x-data="{count: <%= @count %>}">
  <h1>The assigns count is: <span><%= @count %></span></h1>
  <h1>The alpine count is: <span x-text="count"></span></h1>
  <button phx-click="decrement" phx-target=<%= @myself %> %>> Decrement </button>
  <button phx-click="increment" phx-target=<%= @myself %>> Increment </button>
</div>

Likewise, I have the below code where myHookOnWindow.myRenderData(data) runs fine and renders the data, but nothing happens with $watch('data', () => console.log('data changed')) when that data changes. The data is JSON in this case because it complains if I use a regular map or list.

<canvas
  id="MyChart"
  phx-hook="myHook"
  x-data="{data: <%= @data %>}"
  x-init="
    myHookOnWindow.myRenderData(data)

    $watch('data', () => console.log('data changed'))
  "
>
</canvas>