$dispatch() event in Alpine.js is called twice

I am working on the livewire/Alpine project. I have a alpine blade as following :

<div class="tile-container" x-data="{
    tiles: Array(28).fill().map((_, idx) => idx),
  
   animate(key) {
    $dispatch('showMe', { info: key });
   }
                  
}">

<template x-for="(tile, index) in tiles" :key="index">
    <div class="tile" :id="'tile-' + index"
       x-on:click="animate(index)">
       </div>
  </template>

</div>

in my component I am listening the event and can see that the event has been dispatched twice at the same time. I checked the network tab and I see that the dispatch event has been fired twice with only one click. The logs of browser is as follow :

    {
        "path": "",
        "method": "__dispatch",
        "params": [
            "showeMe",
            {
                "info": 1
            }
        ]
    },
    {
        "path": "",
        "method": "__dispatch",
        "params": [
            "showeMe",
            {
                "info": 1
            }
        ]
    }
]

I have checked and there is only one instance of Alpinejs. I need this approach because I am having private variable where I need to maintain the state of this variable. if I use $wire.call then the state of private variable is not being preserved. I have tried almost all, but no success. I think this is some kind of bug out there ? if I use Livewire.dispatch instead it is not being called twice but this time again, I can't store my private variable state due to the new instance of each call as Livewire.dispatch is considered as a new instance. Any help would be highly appreciated. if it is a bug how can we workaround ? I have not installed alpinejs manualy but it has been installed while installing livewire, I have been asked to chose vue or alpinejs and I chose alpinejs.