In Laravel 8 / livewire 2.5 / alpinejs 3.4.2 I try to add masonry for listing of images, but initing it by ID or by classname I got error :

Uncaught TypeError: document.getElementById(...).masonry is not a function
at Proxy.onHostelsGalleyViewPageComponentInit

In blade file :

<div class="frontend_page_container" x-data="hostelsGalleyViewPageComponent()" x-init="[onHostelsGalleyViewPageComponentInit() ]" id="hostels_gallery_page_container">

    <section class="relative py-10">
        <div class="container mx-auto px-4">

            @if(count($hostelsDataRows) > 0)
            <div class="main_gallery__blocks" id="main_gallery__blocks">
                @foreach($hostelsDataRows as $nextHostel)
                @livewire('hostel.hostel-gallery-item', ['nextHostel' => $nextHostel, 'loop_index'=>
                $loop->index])
                @endforeach
            </div>
            @endif

        </div>
    </section>

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

    <script>

        function hostelsGalleyViewPageComponent() {
            return {
                onHostelsGalleyViewPageComponentInit: function () {
                    console.log('onHostelsGalleyViewPageComponentInit::')

                    // var $grid = document.getElementsByClassName('main_gallery__blocks').masonry({ // THIS LINE RAISE the same error
                    var $grid = document.getElementById('main_gallery__blocks').masonry({
                        itemSelector: '.main_gallery__block',
                        columnWidth: '.main_gallery__block',
                        percentPosition: true
                    })

                },

            }
        } // function hostelsGalleyViewPageComponent() {

    </script>

</div>

Which way is correct ?

Thanks!