<div x-data="{ open: false }">
<button @click="open = !open">Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
<li><a href="#" @click="$dispatch('dropdown-select', { element: 'one' })">One</a></li>
<li><a href="#" @click="$dispatch('dropdown-select', { element: 'two' })">Two</a></li>
</ul>
</div>
<div x-data="{ selected: '' }" @dropdown-select.window="selected = $event.detail.element">
<div x-show="selected === 'one'">One showing</div>
<div x-show="selected === 'two'">Two showing</div>
</div>