Error when using mingles in dynamically loaded components

[renky]

Hey @ijpatricio

Thanks again for that great package - I make use of it in two projects now and I even just switch a full-Vue app back to livewire including Mingles :-) This app was just using Vue due to one single killer-feature that needed Vue... finally it's a more reliable codebase now and just a few pages use Vue - Thanks to Mingle....

Nevertheless i now try even to split it up a bit more, and we try to use a Mingle inside a overlay modal...
For this modal we use this package: https://github.com/wire-elements/modal - btw also a great package.

inside one of this modals we now try to use a Mingle.

The problem that arises is, as soon as you try to open this modal, a JS-Error arrises, because window.Mingle.Elements is not defined.

Uncaught TypeError: Cannot read properties of undefined (reading 'Elements')
    at [Alpine] 
        window.Mingle.Elements['resources/js/....pathtomymingle.js']
            .boot(
                'mingle-TvOE2akU5Ftwv5RF',
                'sxxXhqqMpf8MP2gFbOvq',
            )
     (eval at safeAsyncFunction (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1755:23), <anonymous>:4:23)
    at http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1777:25
    at tryCatch (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1697:16)
    at Function.evaluate (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1721:36)
    at http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:3423:39
    at Function.<anonymous> (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:2490:60)
    at flushHandlers (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1862:50)
    at stopDeferring (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1867:9)
    at deferHandlingDirectives (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:1870:7)
    at initTree (http://localhost:5173/vendor/livewire/livewire/dist/livewire.esm.js:2060:7)

I also already analyzed it - The issues arises, because the blade-view of the livewire-template is not rendered when the page is loaded, and it is not executed, when the modal is opened. I could solve this issue, by simply adding this part of code to my page view that opens the modal

@push(config('mingle.stack'))
    @vite('resources/js/....pathtomymingle.js')
@endpush

now when opening up my modal, the Mingle gets loaded fine

I can imagine, that the same issue would arise, if you use lazy loading with livewire-components (but I didn't test it) - do you have any idea how this could be solved so the Mingle gets created, as soon as the livewire component gets rendered?
I don't know if the component initializsation really needs to be added to the scripts-stack - does it? What would happen, if it just gets rendered in place? As far as i know, livewire runs scripts that are inside a loaded component...