Strange behavior passing data from server to Alpine 3

[gushonorato]

Hey! First of all, thanks for your incredible work.

I was upgrading to Alpine version 3 in my project when I ran into a strange behavior on version 3.

On version 2, I was able to do this:

<div x-data="{open: <%= @open %>}" ...>

When I update the @open variable on LiveView (but it could be any Live*** framework) side, the open variable on Alpine side is also updated. But this is not happening anymore on version 3.

This different behavior is by design or I've just found a bug?

[bigsweater]

I'm seeing this as well, using Livewire.

The workaround I've found is to hard-code the data object and update the value I want Alpine to watch on x-init:

<div x-data="{ show: false }" x-init="show = {{ json_encode($show) }}">

The following doesn't work:

<div x-data="{ show: {{ json_encode($show) }} }">

Oddly, if I watch the value of the x-data object in dev tools, it's definitely updating. Alpine just doesn't seem to see it.

[bigsweater]

You can see a demo of the issue here:

https://laravelplayground.com/#/snippets/253380c3-efaf-4a8d-970b-9bedfc54365a

It uses Alpine from unpkg (no version specified, so latest) and whatever version of Livewire is available on Laravel Playground.

---

Edit: Just added the auto-evaluated init property to the Laravel Playground demo above. Seems x-init is the only way it'll work.

[bigsweater]

Update: Still the same behavior in 3.2.0...seems like a bug to me! I don't know Alpine's internals but I'm happy to help debug any way I can.

[danddanddand]

Don't use 3.2.0, it's broken at the moment

[gushonorato]

@calebporzio should we open an issue to fix that?