Problema, quando adiciono qualquer File Picker dentro do BukCalendar ou de algum componente dentro dele, o FullCalendar não funciona corretamente

BukCalendarComponent.vue

<template>
    <div>
        <buk-event-modal @save-event="sendEvent" v-if="buildModal"></buk-event-modal>
        <full-calendar ref="calendar" :config="config" :events="events" :editable="false"></full-calendar>
    </div>
</template>

<script>
    import BukEventModal from './BukEventModalComponent.vue';

    export default {

        components: { 
            BukEventModal
        },

        props: {
            events: {
                default: () => { 
                    return [];
                }
            },

            eventsRoute: {
                default: ''
            }
        },

        created() {
            this.events.forEach((event, index) => {
                this.$set(this.events[index], 'className', event.status);
            });
        },

        mounted() {
            // Montando a modal após montar o calendário não dá o problema
            this.buildModal = true;
        },

        data() {

            return {
                buildModal: false
            }

        },

        methods: {

            sendEvent(data) {

                //... AJAX para o servidor

            }

        }

    }
</script>

BukEventModalComponent.vue

<template>
    <div>
        <!-- Modal -->
        <div id="addEventModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Add Event</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form id="eventForm" @submit.prevent="saveEvent">
                                <div class="form-group col-xs-12 col-sm-12">
                                    <label for="client_id">Client</label> 
                                    <select required="required" id="client_id" name="client_id" class="form-control" v-model="event.client_id">
                                        <option value="1">Jessica alves</option>
                                        <option value="2">Jean Silva</option>
                                    </select>
                                </div>
                                <div class="form-group col-xs-12 col-sm-12">
                                    <label for="service_id">Service</label> 
                                    <select required="required" id="service_id" name="service_id" class="form-control" v-model="event.service_id">
                                        <option value="1">Consulta Odontológica</option>
                                    </select>
                                </div>
                                <div class="form-group col-xs-12 col-sm-12">
                                    <label for="provider_id">Provider</label> 
                                    <select required="required" id="provider_id" name="provider_id" class="form-control"  v-model="event.provider_id">
                                        <option value="1">Dr Tiago</option>
                                    </select>
                                </div>
                                <div class="form-group col-xs-12 col-sm-6">
                                    <label for="start">Start</label> 
                                    <date-picker id="start" name="start" :required="true"  :actual-date.sync="event.start"></date-picker>
                                </div>
                                <div class="form-group col-xs-12 col-sm-6">
                                    <label for="end">End</label> 
                                    <date-picker id="end" name="end" :required="true"  :actual-date.sync="event.end"></date-picker>
                                </div>
                                <div class="form-group col-xs-12 col-sm-12">
                                    <label for="description">Description</label> 
                                    <textarea name="description" cols="50" rows="10" id="description" class="form-control"  v-model="event.description"></textarea>
                                </div>
                                <div class="form-group col-xs-12 col-sm-6">
                                    <label for="status">Status</label> 
                                    <select id="status" name="status" class="form-control"  v-model="event.status">
                                        <option value="scheduled">Scheduled</option>
                                        <option value="finished">Finished</option>
                                        <option value="canceled">Canceled</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="eventForm" class="btn btn-success pull-left">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-success" data-toggle="modal" data-target="#addEventModal">Add Event</button>
    </div>
</template>

<script>
    import DatePicker from './DatePickerComponent.vue';

    export default {

        components: { 
            DatePicker
        },

        data() {

            return {
                event: {
                    client_id: null,
                    service_id: null,
                    provider_id: null,
                    start: new Date(),
                    end: new Date(),
                    description: '',
                    status: 'scheduled'
                }
            }

        },

        methods: {

            saveEvent() {
                this.$emit('save-event', this.event);
            }

        }

    }
</script>

DatePickerComponent.vue

<template>
  <date-picker v-model="date" :config="config" readonly="readonly"></date-picker>
</template>

<script>
    import datePicker from 'vue-bootstrap-datetimepicker';
    import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';

    export default {
        components: {
            datePicker
        },

        props: {
            initialDate: {
                default: () => {
                    return new Date();
                }
            },
            actualDate: {
                default: () => {
                    return new Date();
                }
            }
        },

        watch: {
            date(newDate) {
                this.$emit('update:actualDate', newDate);
            }
        },

        data() {

            return {
                date: this.initialDate,
                config: {
                    format: 'MM/DD/YYYY HH:mm',
                    useCurrent: false,
                    sideBySide: true,
                    ignoreReadonly: true
                }
            }

        }

    }
</script>