dispatchBrowserEvent to only a certain AlpineJS Component

#1

I’m building at the moment a modal manager.
I have two Livewire Components: Windows.php and Window.php

windows.blade.php:

    <div>
        @foreach(array_reverse($windows) as $window)
            <livewire:ui.window :window="$window" :key="'window-'. $window['key']" />
        @endforeach
    </div>

So with this i can open multiple modals at the same time.

Here I’m dispatching a browser event to close the current modal:

Window.php:

public function closeCurrentWindow($window)
{
   $this->dispatchBrowserEvent('close-window', ['index' => $window]);
}

window.blade.php:

<div
    wire:ignore
    x-data="windowManager()"
    x-on:close-window.window="closeWindow( $event.detail.index, @this)"
    x-show="open"
    x-transition:enter-start="-translate-y-12 opacity-0"
    x-transition:enter-end="translate-y-0 opacity-100"
    x-transition:leave-start="translate-y-0 opacity-100"
    x-transition:leave-end="translate-y-12 opacity-0"
>
   <div>
       Modal content
   </div>
<script>
        window.windowManager = function () {
            return {
                open: false,
                closeWindow(index, wire) {
                    this.open = false;
                    console.log(this);
                    setTimeout(() => {
                        wire.call('close', index)
                    }, 500);
                }
            }
        }
    </script>
</div>

Now the dispatch event should close the current modal (with animation), but it closes all windows when this.open = false gets triggered. Can I access only a special AlpineJS component when using $this->dispatchBrowserEvent('close-window', ['index' => $window]); ?