Flickity on change event not firing in Vue component

Question

I'm using Flickity for a carousel component in a Nuxt / Vue project. I have created a custom page dots / navigation for the carousel and it works fine except when I drag / swipe the carousel the current slide index is not updating to also update the custom navigation. Clicking on the actual custom navigation works great and controls the carousel as well as updating the current slide index.

<template>
  <div>
    <Flickity
      ref="flickity"
      :options="flickityOptions"
      class="carousel-band-cards-row"
      :key="componentKey"
    >
      <div
        class="carousel-cell-card"
        v-for="post in posts"
        :key="post.link"
      >
        <div class="card card-social">
          <a
            @click.prevent="toggleModal(post.link)"
            class="l-card"
            target="_blank"
            style="cursor: pointer"
          >
            <header class="card-body-text pt-3">
              <h3 class="card-title-date">{{ post.date }}</h3>
              <div class="card-summary" v-html="post.text"></div>
            </header>
            <div class="card-link-icon">
              <i class="fas fa-external-link-alt"></i>
            </div>
            <div class="card-image card-image--social">
              <i v-bind:class="post.faicon"></i>
              <span class="sr-only">post.socialMediaName</span>
            </div>
          </a>
        </div>
      </div>
    </Flickity>

    <ul
      class="btn-link-list btn-link-list--slide-controls"
    >
      <li
        class="slide-controls-group"
      >
        <ul class="slide-controls-group-list">
          <li
            v-for="(slide, index) in slideOptions"
            :key="index"
            class="slide-controls-group-item"
            :class="{ 'is-selected': index === currentSlide }"
          >
            <button
              class="btn-slider-control"
              @click="goToSlide(index)"
            >
              <span class="btn-bar"></span>
              <span class="sr-only">{{ slide }}</span>
            </button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    posts: {
      required: false,
      type: Array,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      // ----- flickity
      componentKey: 0,
      currentSlide: 0,
      slideOptions: ['Slide 1', 'Slide 2', 'Slide 3'],
      flickityOptions: {
        cellSelector: '.carousel-cell-card',
        accessibility: true,
        setGallerySize: true,
        cellAlign: 'left',
        contain: false,
        adaptiveHeight: false,
        watchCSS: true,
        selectedAttraction: 0.01,
        friction: 0.15,

        prevNextButtons: false,
        pageDots: false,
        wrapAround: false,
      },
    };
  },
  mounted() {
    this.slideEventListener();
  },
  methods: {
    goToSlide(i) {
      this.$refs.flickity.select(i);
      this.currentSlide = i;
    },
    slideEventListener() {
      this.$refs.flickity.on('change', (i) => {
        this.currentSlide = i;
      });
    },
  },
};
</script>