Livewire restores alpine's x-cloak attribute

What seems to be the problem: I have a modal that I’m controlling the appearance of with alpine. To prevent a flash of the modal on page load, it has x-cloak. The content of the modal comes from a livewire component. It appears that when Livewire re-renders the modal it puts back the x-cloak that alpine had earlier removed - making the modal disappear again.

livewire component view

<div x-show='open' x-cloak
    class="fixed top-0 z-20 w-full h-full bg-black bg-opacity-75"
    x-transition:enter="transition ease-out duration-200 transform" x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200 transform"
    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
    <div class="flex flex-col flex-start">
        <div class="h-32 text-right empty">

        <div class="z-50 w-1/2 p-1 p-16 mx-auto text-gray-800 bg-gray-100 rounded-lg" x-on:click.away="open=false">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. 

x-data is declared in a parent div so that my button to open the modal is in scope.

Solution is to move the modal dialog from the livewire component and only have the changing data inside the modal as part of the livewire rendered part.

x-cloak is now part of the page and not part of the component.

Its a pity because I was hoping to have the entire modal as a livewire component.