Flickity + Typescript Errors: Bad Element for Flickity: .carousel

[CodyEddings]

I've been working with Flickity in my Vue 3 app and it works fine when I use a hardcoded HTML carousel with static cells. I need to add cells programmatically at runtime, however, and I can't get the flickity API to work correctly.

I'm trying to follow the append() example but I get the error flickity.js?1385:72 Bad element for Flickity: .carousel in my inspector during runtime. I tried to follow the solution here and here but neither have been able to run successfully, it looks like its due to Typescript errors on the Flickity lib. I also installed @types/flickity, fyi.

What can I do to fix my append logic below?

<template>
        <div class="row">
          <div class="col d-block m-auto payment-option">
            <flickity ref="carousel" :options="flickityOptions">
            </flickity>
          </div>
      </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
//import Flickity from 'vue-flickity/src/flickity.vue';
import Flickity from 'flickity'
export default defineComponent({
  name: "PageName",
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 3,
        prevNextButtons: false,
        pageDots: true,
        wrapAround: true
      }
    };
  },
  methods: {
    createBankAccountCarousel(flkty: Flickity) {
      flkty.append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div');
      cell.className = 'carousel-cell'
      cell.textContent = "Hi"
      return cell
    }
  },
  mounted() {
    let flkty = new Flickity(this.$refs.carousel)
    this.createBankAccountCarousel(flkty)
  }
});
</script>

[CodyEddings]

Fixed using the Typescript - Vue 3 Flickity solution here