fullcalendar doesn't render properly after opening a modal

I'm currently using fullcalendar on my project. The calendar kinda works however when I load the calendar after a button click it doesn't render properly. However if I open dev-tools which moves the modal slightly it appears to render. Or if I press a button to change the month for example it appears normally. https://imgur.com/a/T8MYj58

Here is what controls the modal opening and closing.

        modalControl()
        {
            if(this.showModal === false)
            {
                this.showModal = true
            }
            else if(this.showModal === true)
            {
                this.showModal = false
            }
        },

The calendar options from fullcalendar.

            calendarOptions: {
                timeZone: 'UTC',
                plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin ],
                initialView: 'dayGridMonth',
                contentHeight: 'auto',
                aspectRatio: 1.5,
                buttonText: {
                    today: 'Today',
                    month: 'Month',
                    week: 'Week',
                    list: 'List'
                },
                headerToolbar: {
                    left: 'prev next today',
                    center: 'title',
                    right: 'dayGridMonth'
                },
                selectable: true,
                weekends: true,
                dateClick: this.handleDateClick
            },

        <vue-final-modal v-model="showModal" :drag="true" :esc-to-close="true">
            <div class="flex items-center justify-center h-screen">
                <div class="bg-backgroundWhite p-12">
                    <div class="flex justify-between">
                        <div>Book a lesson</div>
                        <button @click="modalControl">X</button>
                    </div>
                    <div class="flex-row w-full h-full p-3 shadow-xl rounded-xl m-3">
                        <FullCalendar :options="calendarOptions"/>
                    </div>
                </div>
            </div>
        </vue-final-modal>

Thank you.