Shadowed assigns with AlpineJS v3 and Phoenix LiveView 0.15

I got this error if I use <%= @count %>. I tried x-data={"{ count: #{@count} }" too but it doesn’t show the actual value in Chrome dev tool. it is not working as well.

Make sure the attribute is properly closed. This may also happen if
there is an EEx interpolation inside a tag, which is not supported.
Instead of

<div <%= @some_attributes %>>
</div>

do

<div {@some_attributes}>
</div>

Where @some_attributes must be a keyword list or a map.

This workaround would be fine if the Alpine component only contains shadowed assigns of LiveView.

But, if the Alpine component is maintaining its own states besides of the shadowed assigns of LiveView. Every time the shadowed assigns of LiveView updates, the Alpine component’s own states will be reset by window.Alpine.initTree(to).

That’s not expected.

For example:

<div x-data={"{ count: #{@count} }"}></div>                # fine
<div x-data={"{ count: #{@count}, showTip: true }"}></div> # bad

So, I prefer the workaround provided by simoncocking.

I struggled for a sometime with this issue, including using x-init to set the value without success, the only thing that has worked is the addition of window.Alpine.initTree(to) after the window.Alpine.clone(from, to) call.

I’ve tried this but with no luck

I have seen that if you call Alpine start again it re initializes and shows the correct data. My thought here is this is due to the way we are calling clone or what needs to happen to correctly re initialize

Any how heres my reproducible code.
https://github.com/MorphicPro/morphic_pro

Edit: so this looks like a possible solution Alpine.initTree()

Edit Edit:
Ok so I found it

        if (from._x_dataStack) {
          window.Alpine.clone(from, to);
          window.Alpine.initTree(to)
        }

and you don’t need to use x-init, Also heres something odd., look at what happens if you only use window.Alpine.initTree(to) But after inspecting the _x_dataStack array I’m not sure if that’s the correct way to do this.
Also this Expose the initTree method by KevinBatdorf · Pull Request #1648 · alpinejs/alpine · GitHub

Thanks for showing this new dom watcher. I was not seeing any console logs so I assumed it had not changed, but infact it was this that was the source of my issues.

So we’ve identified a workaround; the x-data behaviour in Alpine v3 appears to have changed, but it can be achieved as follows:

<div id="counter" x-data="{count: 0}" x-init="count = <%= @count %>">
  ...
</div>