Weird init() problem

[TiiFuchs]

Hey there,

I had a very weird problem right now.
I experimented with WebSockets and coded a Chat App using alpinejs.
I created a ChatApp function that is called via x-data="ChatApp()"

Inside this ChatApp() I'm returning an object that includes a init() method. (Code excerpt at the end)
The documentation states: "If the x-data object of a component contains an init() method, it will be called automatically."
I've build on that. Locally everything worked as expected.

But after I deployed the application it just didn't call the init() method inside the ChatApp() object. As a workaround I added a x-init="init()" and that worked on my production system too.

I just don't understand why there is a difference between the servers. I called it in the same browser and everything.

JS looks something like this:

let ChatApp = () => {
    return {
        init() {
            Echo.join('chat').here(participants => {
                this.participants = participants;
            })
            .joining(user => {
                this.participants.push(user);
            })
            .leaving(user => {
                _.remove(this.participants, participant => participant.id === user.id);
            })
            .listen('NewChatMessageEvent', message => {
                this.messages.push(message);
            })
        },

        messages: [],
        draft: '',
        participants: []
    };
}

I'm using Laravel Echo here... But a simple js alert() won't get called either.

In my HTML I have an object root for my alpine object:

    <div class="flex mx-5 my-5 absolute inset-0 top-[120px]"
         x-data="ChatApp()">

Doesn't work on production, but on localhost

    <div class="flex mx-5 my-5 absolute inset-0 top-[120px]"
         x-data="ChatApp()" x-init="init()">

Does work on production and on localhost.

I'm just trying to understand why there is a difference between both servers. Maybe someone has an idea.