Vue Flickity Carousel: viewport height 0

Question

I'm stuck with a Flickity library error.

I have a carousel component which uses the Flickity to create the carousel. Everything was working fine until I needed to open this carousel inside a modal component.

When I trigger a button it opens the modal without the images from the carousel. If I resize the windows (enlarge or reduce the screen) Flickity starts to work. But I need flickity to work without the user having to move the screen.

<template>
    <modal v-bind="$props">
        <template v-slot:trigger>
            <button>Open Modal</button>
        </template>
        <template>
            <carousel :options="{wrapAround: true}">
                <img src="https://via.placeholder.com/800x600" />
                <img src="https://via.placeholder.com/800x600" />
                <img src="https://via.placeholder.com/800x600" />
            </carousel>
        </template>
    </modal>
</template>

<script lang="ts">
    import { defineComponent } from '@vue/composition-api';
    import Carousel from '../carousel/carousel.vue';
    import Modal from '../modal/modal.vue';
    import Button from '../button/button.vue';

    export default defineComponent({
        components: {
            Carousel,
            Modal,
            Button,
        },

    setup() {
            return {};
        },
    });
    </script>

I noticed in another older post that one possible solution is: when I trigger the modal button I need to access the carousel component and make flickity do the resize method. I tried to do it but I have no ideia how can I call the method of the flickity when a trigger the modal button using Vue composition api.