Flickity in Nuxt3 component incorrectly initializes during mounted hook before page transition, before DOM load

Question

I'm trying to initialize a Flickity slider on a page, and it works if I load the page directly – but if I'm navigating to the page from another page, I've noticed that page transitions prevent Flickity from initializing on mounted only after the DOM is fully loaded. I've noticed if I use setTimeout with a timer equal to the transition time then it works. Here's my code in the Flickity.vue component:

<script lang="ts">
export default {
  data() {
    return {
      FlickityInstance: null, // to store the Flickity instance
    }
  },
  async mounted() {
    console.log('mounted')
    setTimeout(() => {
      this.initializeFlickity()
    }, 420) //setTimeout is just a test to see if it works
  },
  beforeUnmount() {
    if (this.FlickityInstance) {
      this.FlickityInstance.destroy()
    }
    console.log('beforeUnmount')
  },
  methods: {
    async initializeFlickity() {
      // Destroy the previous instance if it exists
      if (this.FlickityInstance) {
        this.FlickityInstance.destroy()
        this.FlickityInstance = null
      }

      const FlickityModule = await import('flickity')
      this.FlickityInstance = new FlickityModule.default(this.$refs.carousel, {
        pageDots: false,
        arrowShape: '',
      })
    },
  },
}
</script>

Obviously I'd like to not use setTimeout... somehow nextTick() doesn't work, as it still triggers immediately when the page is mounted. It's quite similar to this issue: nuxt3 mounting page before page transition, which causes troubles with plugins initialization

but this is resolved from using nuxt-swiper, and I'd still like to use the native Flickity package.