Is alpine data synchronized with URL hash?

[piotrpog]

I have an app with x-data like this:

return{
    onStart: function(){
        this.$watch('open', value => {
            if(this.open == false) {

            } else {
                location.hash = "menu"; 
            }
        });
    },
    open: false,
}

As you can see, I use $watch to append hash to URL when variable open changes. But when the hash is appended and then I click the browser back button, variable changes to the previous state. Is this some undocumented behavior? When after this I click forward button, hash again changes to menu, but this time the variable won't change the second time.

I tried to do something like this:

return{
    onStart: function(){
        this.$watch('open', value => {
            if(this.open == false) {
                location.hash = ""; 
            } else {
                location.hash = "menu"; 
            }
        });
    },
    open: false,
}

But this causes even stranger behavior - when i change variable hash appears and then when click back button, url changes for a second to one without hash and then hash appears again.

[SimoTod]

Alpine doesn't sync with the url, clicking back it's just going to the previous entry in your browser history so components are just reinitialised.

[SimoTod]

If you need that kind of logic, you need to read the hash in x-init and set the variable when starting the component

[HugoDF]

You can also read the hash inside of x-data 👍