Glide JS not displaying images

Question

I'm using Glide JS carousel in a VueJS project to display some images (at least 3), but what happens is that only the first of the three images are displayed, while the other 2 doesn't display anything, even though the <img/> tag has the correct src URL for the image. I've been trying to the debug this for several hours and can't find anything that might cause this bug.

    import Glide from "@glidejs/glide";
import FeatherIcon from "vue-feather";
import "./_style.scss";

export default {
  name: "DashboardCarousel",
  props: {
    imageSources: Array
  },
  mounted() {
    new Glide(".glide").mount();
  },
  render(h) {
    return (
      <div class="glide">
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">
            {this.imageSources.map((source, key) => (
              <li
                key={key}
                class="glide__slide glide__frame glide__image-area"
                class={`glide__slide slide-${key}  glide__image-area`}
              >
                <img
                  onClick={() => window.open(source.link)}
                  src={source.path}
                  style={{ width: "100%", cursor: "default" }}
                />
              </li>
            ))}
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
          <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
            <FeatherIcon
              type="chevron-left"
              size={48}
              style={{ opacity: 0.5 }}
            />
          </button>
          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
            <FeatherIcon
              type="chevron-right"
              size={48}
              style={{ opacity: 0.5 }}
            />
          </button>
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
          {this.imageSources.map((source, index) => (
            <button class="glide__bullet" data-glide-dir={`=${index}`}></button>
          ))}
        </div>
      </div>
    );
  }
};

Answer 1

Solution found: My image data was loaded after glidejs was rendered. As Glide JS got these image from props, which is static, it wouldn't change after parent component was updated (that's my theory).