Nested blade components with alpine js framework

Hi there,

I'm updating a Laravel site to use alpine. I want to follow the concept of DRY meaning almost all repeatable UI goes into blade components. <x-componen...>. It's all great and very clean.... however.... Now i'm trying to put my modals for editing users, roles etc. into a reusable component. The structure is something like this.

<div x-data="modalData()">

  <button type="button" x-spread="trigger">Open modal</button>

  <x-modal title="Add user"> <!-- Overlay, modal, header, close button, transitions etc -->

   ... Form with inputs <!-- Modal body -->

  <x-slot name="footer"> <!-- Slot for buttons so I can change buttons in different situations -->
    <x-cancel-btn/> <!-- button component which must dispatch or call a method on the root x-data object -->
    <x-submit-btn/>
   </x-slot>

  </x-modal>

</div>

My head explodes when trying to come up with the solution on how to reuse a modal where mechanisms such as overlay, click away, close button transitions etc. lies in the blade component while the x-data root element is all the way up on the target page. As I see it I need to have a standardized x-data object which has all the required variables and events that are used inside the x-blade component. show, hideModal(), showModal(),, submitModal() etc.

For me its a mess that the x-data object is not defined together with the blade component.

I hope that someone with more brainpower than me can figure out clean approach.

Thank you in advance!