How to Watch Alpine.js Store Value

In an Alpine.js store, you can make use of "Alpine.effect()" in order to watch the property. With the code example below, anytime the "name" property updates, the value will be console logged to the console devtool.

Alpine.store("alpineStore", {
    name: 'Hi Dad!',
    
    init() {
        Alpine.effect(() => {
            console.log(this.name);
        });
    },
});

Another way to watch an Alpine.js store property you can make use of the x-init directly on the alpine instance itself.

<div x-data x-init="$watch('$store.alpineStore.name', function (val) {
    console.log(val);
})"></div>

Now, anytime the "name" property is updated, the value of the name will be console logged to the console tab of the devtools.
I hope this tutorial is beneficial to you and if you do find it helpful do make sure to share it with your friends. Cheers and happy coding!