Swiper.js autoplay / loop with nested dynamic Alpine.js x-for loop - swiper.js

Question

I've used auto autoplay loop Swiper in many instances where slides are rendered server-side but this is the first time I'm using in conjunction with a client-side framework such as Alpine.js.
I got things working client-side within Alpine... And it works when using the left right navigation buttons, BUT... it does NOT autoplay scroll, due to, what I'm guessing, is the fact that Swiper doesn't know how many slides it has to work with in the Alpine x-for loop?
Is there a way that the number of slides can be set during Swiper init so that it knows how many slides it has to work with and in-turn autoplay? Or am I just missing something?
I've simplified and parsed out my code below for readability sake, just use as an example of what's generally happening with the nested Alpine loop.
<div x-data="{suggestions: [], 'isLoading': true}"
x-init="fetch('/p/items/suggested/?i=123')
.then(response => response.json())
.then(response => {
suggestions = response.suggestions;
isLoading = false;
})">
<div x-data="{swiper: null}"
x-init="swiper = new Swiper($refs.suggcontainer, {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: true,
pauseOnMouseEnter: true
},
slidesPerView: 2,
spaceBetween: 8
})">
<div class="swiper" x-ref="suggcontainer">
<div class="swiper-wrapper">
<template x-for="sugg in suggestions" :key="sugg.id">
<a x-bind:href="sugg.url_slug" class="swiper-slide">
<img :src="sugg.image_thumb" :alt="sugg.name" />
</a>
</template>
</div>
</div>
</div>
</div>