Carousel Stuck on Last Slide

My Flickity carousel in my Vue 3 Typescript app is being populated with slides dynamically at runtime via a for loop.

The problem:

Check out this video of the bug The last slide added to my carousel is the only one that shows up, and when I try to drag the slide left or right my drag is ignored. Clicks to the slide navigation buttons or the page dots are registered and cause slide change callbacks to be triggered, but the slide itself never animates/moves/reacts at all to any of these clicks. For example: if my Flickity carousel contains slides that say "1" and "2", slide "2" (the last added slide) will always be visible and won't respond to navigation button/page dot clicks or dragging at all.

Where it gets really weird:

When I open up the inspector in chrome the Flickity carousel immediately starts displaying unique, scrollable slides. The same thing happens if I close the inspector after reaching this page containing the carousel; it "fixes" the bug.

What I've tried:

I thought that maybe the inspector opening or closing could be causing some sort of internal reload call for Flickity, so I tried to intentionally reload the carousel after I've added all of my slides, but it had no effect on the bug. Something unique is happening when I open/close the inspector in Chrome while the carousel is rendered that makes the last slide get "unstuck" from always being visible.

Code: Page.vue

<template>
<div class="card" v-show="showAccountPicker">
  <h3 class="card-header text-center">Choose Bank Account</h3>
  <div class="card-body text-center">
    <div class="row">
      <div class="col d-block m-auto">
        <flickity ref="flickity" @init="onInit" :options="flickityOptions">
        </flickity>
      </div>
    </div>
  </div>
</div>
<script lang="ts">
import {defineComponent} from "vue";
import Flickity from "./widgets/Flickity.vue";

const axios = require("axios").default;
let bankAccounts = new Set<FundingSource>()

export default defineComponent({
  name: "BankEntryPage",
  components: {
    SpringSpinner,
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 1,
        prevNextButtons: true,
        pageDots: true,
        wrapAround: false,
      }
    };
  },
  methods: {
    configureBankAccountCarousel(bankAccounts: Set<FundingSource>) {
      let that = this
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      for (let account of bankAccounts) {
        //last added cell is stuck focused by the carousel no matter what clicking/dragging occurs
        (that.$refs.flickity as any).append(that.makeFlickityCell(account))
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (that.$refs.flickity as any).reloadCells() //Doesn't do anything to fix the bug
    },
    makeFlickityCell(bankAccount: FundingSource) {
      const cell = document.createElement('div')
      cell.className = 'carousel-cell'
      cell.textContent = bankAccount.name + "\n" + bankAccount.bankAccountType
      return cell
    },
  },
  mounted() {
    let script = document.createElement("script")
    script.src = "https://cdn.dwolla.com/1/dwolla.js"
    document.head.appendChild(script)

    //Event listener for Flickity carousel
    this.$nextTick(() => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (this.$refs.flickity as any).on('change', (index: number) => {
        console.log('Slide changed to index ' + index)
      })
    })
  },
  created(){
    this.configureBankAccountCarousel(bankAccounts)
  }
});
</script>

Flickity.vue

<template>
  <div ref="root" class="flickity">
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import Flickity from 'flickity'

export default defineComponent({
  props: {
    options: Object,
  },
  setup(props) {
    let flickity: typeof Flickity | null = null
    const root = ref<HTMLElement | null>(null)

    onMounted(() => flickity = new Flickity(root.value as HTMLElement, props.options))
    onUnmounted(() => flickity?.destroy())

    return {
      root,
      append(element: HTMLElement) {
        flickity?.append(element);
        flickity?.select(-1)
      },
      on(eventName: string, listener: () => void) {
        flickity?.on(eventName, listener)
      },
      reloadCells(){
        flickity?.reloadCells()
      }
    }
  },
})
</script>

<style>
@import '~flickity/dist/flickity.css';

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #383838;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  /*content: counter(gallery-cell);*/
  line-height: 200px;
  font-size: 80px;
  color: white;
}

/* smaller, dark, rounded square */
.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #333;
}
.flickity-prev-next-button:hover {
  background: #248742;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: white;
}
.flickity-prev-next-button.no-svg {
  color: white;
}
/* position outside */
.flickity-prev-next-button.previous {
  left: -5px;
}
.flickity-prev-next-button.next {
  right: -5px;
}

/* white circles */
.flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 1px solid white;
}

/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: white;
}

/* Enable carousel to be keyboard focused & navigated */
/*.flickity-enabled:focus .flickity-viewport {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
}*/
</style>
flickity.d.ts

interface IFlickity {
    new (el: string | HTMLElement, options?: Record<string, unknown>): this;
    append(element: HTMLElement);
    destroy();
    select(id: string | number);
    on(eventName: string, listener: () => void);
    reloadCells();
}

declare module 'flickity' {
    const Flickity: IFlickity;
    export = Flickity;
}

drewjbartlett / vue-flickity

Carousel Stuck on Last Slide #70