I am using a Flickity carousel in a vue (frontend) ruby on rails (backend) application. When my app loads the items in my carousel display vertically, as if the carousel didn't even exist. If I resize my window, then the carousel kicks in (behaves like a carousel).

<template>
  <Flickity ref="flickity" :key="keyIncrementer" :options="computedOptions">
    <item1 />
    <item2 />
    <item3 />
  </Flickity>
</template>

<script>
import Flickity from "vue-flickity";
import { debounce } from "lodash";

const DEFAULT_OPTIONS = {
  cellAlign: "left",
  pageDots: false,
  prevNextButtons: true,
};
export default {
  components: {
    Flickity,
  },

  props: {
    options: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  data() {
    return {
      keyIncrementer: 0,
    };
  },
  computed: {
    computedOptions() {
      return { ...DEFAULT_OPTIONS, ...this.options };
    },
  },
  created() {
    this.$root.$on("refresh-carousel", this.refresh);
  },
  mounted() {
    this.refresh();
    window.addEventListener("resize", this.debounceRefresh);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.debounceRefresh);
  },
  methods: {
    debounceRefresh: debounce(function () {
      this.refresh();
    }, 100),
    refresh() {
      this.$nextTick(() => {
        this.keyIncrementer++;
      });
    },
  },
};
</script>

If anyone knows why this is happening, that would help. I would like to have a carousel as soon as the component mounts, without resizing.