Estoy usando un carrusel de Flickity en una aplicación vue (frontend) Ruby on Rails (backend). Cuando mi aplicación carga los elementos en mi carrusel, se muestran verticalmente, como si el carrusel ni siquiera existiera. Si cambio el tamaño de mi ventana, entonces el carrusel se activa (se comporta como un carrusel).

 <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>

Si alguien sabe por qué sucede esto, sería de gran ayuda. Me gustaría tener un carrusel tan pronto como se monte el componente, sin cambiar el tamaño.