Initialise a Glide carousel inside a modal launched with Alpine.js

Question

I've forked a Codepen I found on how to launch multiple modals using Alpine.js: https://codepen.io/tyssen/pen/wvQqYLZ

I've adapted a bit because I want to display a Glide carousel as part of the modal content. As you'll see in the Codepen above, I've got the images displaying but the carousel isn't initialised. I don't really know where to start with that.

All the code is in the pen but I'll include it here so it's a bit easier to read:

    <div x-data="{}">
      <div class="button" @click="$dispatch('modal', {articleSearch: 1, isOpen: true,  url: './one.html'})">
        Product One
      </div>
    </div>
    <div x-data="{}">
      <div class="button" @click="$dispatch('modal', {articleSearch: 2, isOpen: true, url: './two.html'})">
        Product Two
      </div>
    </div>
    <div x-data="{}">
      <div class="button" @click="$dispatch('modal', {articleSearch: 3, isOpen: true,  url: './three.html'})">
        Product Three
      </div>
    </div>

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

      <template x-on:modal.window="articleSearch = $event.detail.articleSearch; url = $event.detail.url; isOpen = $event.detail.isOpen; fetchArticle();"></template>
      <template x-if="article">
        <div class="modal-overlay" x-show="isOpen" x-cloak>
          <div class="modal-container" x-show="isOpen" @click.away="closeArticle();" x-cloak>

            <div class="modal-head">
              <div class="article-attributes">
                <span x-text="'Product ' + article.id"></span>
              </div>
              <div class="close" @click="closeArticle();"><i class="fas fa-times">X</i></div>
            </div>

            <div class="modal-body">
              <h3 x-text="article.title"></h3>
              <p x-text="article.description"></p>

              <div class="glide glide-project">
                <div class="glide__track" data-glide-el="track">
                  <ul class="glide__slides glide-fade h-full">
                    <template x-for="image in article.images">
                      <li>
                        <img :src="image" alt="">
                      </li>
                    </template>
                  </ul>
                </div>
              </div>
            </div>

          </div>
        </div>
      </template>

    </div>

    function articleSearch() {
      return {
        isLoading: false,
        isOpen: false,
        articleSearch: 0,
        url: "",
        article: null,
        fetchArticle() {
          this.isLoading = true;

          fetch(`https://dummyjson.com/products/${this.articleSearch}`)
            .then((response) => response.json())
            .then((data) => {
              // console.log(data);
              this.isLoading = false;
              this.article = data;

              window.history.pushState("", "", this.url);
            })
            .catch((err) => console.log("ERROR", err));
        },
        closeArticle() {
          window.history.back();
          this.isOpen = false;
          this.articleSearch = 0;
          this.url = "";
          this.article = null;
        }
      };
    }

I've got other Glide carousels elsewhere on the site not in modals which work fine. They're initiliased from a script that is added at the bottom of the document and deferred:

    import Alpine from 'alpinejs';
    import Glide, {
      Autoplay,
      Breakpoints,
      Controls,
      Swipe,
    } from '@glidejs/glide/dist/glide.modular.esm';

    window.Alpine = Alpine;
    window.Alpine.start();
    window.addEventListener('DOMContentLoaded', function () {

      const hero = new Glide('.glide-hero', {
        type: 'carousel',
        perView: 1,
        autoplay: 3000
      });

      if (document.querySelector('.glide-hero')) {
        hero.mount({ Autoplay, Controls, Swipe });
      }

    });

I've tried moving the articleSearch function to this script instead of being inline on the page, but when I do that, I get errors about articleSearch and article not being defined. I don't understand why that is.

I know that if I try and initialise Glide carousels from the script in the page itself like the articleSearch function is, that it will throw errors due to Glide not being loaded until the script at the bottom of the page.