Swiper navigation works in development but not on my aws amiplify app

[MatStafford]

I am building an app for fun with a buddy and have been trying to incorporate swiper js into it. I am using Vue 3, specifically with the composition API, so that may have a part in this problem but I'm not really sure.

In development, the arrows for the swiper navigation component are visible, clickable, and function just fine. They swipe correctly based on my options I gave to swiper. However, in my amazon amplify app, they do not show up. I can find them there in the dev tools when I inspect the page, but even by messing with the CSS there I can't get them to work or become visible in any way. They just don't work right outside of development. I'm still learning vue and aws (and front end in general), but the whole reason I have this on amplify is just so as I continue to build this stuff out, my buddy who is working on the backend of this can see how things are going and give feedback/test as we go along.

I'm just looking for some good areas to look into for troubleshooting this. Everything I've googled so far hasn't helped yet, but most of the solutions are also for the options API of view so my direction with this app is already adding another layer of complexity for me to solve on my own.

I also want to mention that I can still click-drag swipe the container. That functionality still works and it swipes the correct group of slides still. It's just the arrow buttons alone that don't seem to work with the swiper stuff.

<template>
  <section class="hp-home-page-section">
    <router-link to="#" class="hp-section-header">Trending TV Shows</router-link>
    <swiper class="hp-large-screen" :observer="true" :observeParents="true"  :slidesPerView="auto" :slidesPerGroup="10"
            navigation/>

<swiper-slide v-for="item in movies" :key="item.id" class="hp-items">
        <router-link :to="'/show/' + item.id">
          <img :src="item.moviePoster" class="hp-movie-poster"/>
          <span class="hp-span">{{ item.title }} ({{ item.releaseDate }})</span>
        </router-link>
      </swiper-slide>
    </swiper>