x-bind doesn't update an attribute when global $persist variable changed

[VladyslavChernyshov]

https://codepen.io/Vladyslav-Chernyshov/pen/LYwqyvB

The button updates the data-bs-theme key in local storage but it doesn't trigger the x-bind.
Any suggestions of how to make it work?

[SimoTod]

Alpine.data is a component factory. The 2 x-data directives generate 2 different set of data so you are toggling the internal variable, not the one associated to the html.
I assume it's just a oversimplified example because it doesn't make much sense but if you want to share a variable, in general you should use Alpine.store, not Alpine.data (unless they are nested, in that case the child component can see/edit the parent values.

For this specific example, you can just remove the internal x-data attribute https://codepen.io/SimoTod/pen/dyxaRWL and it will just work