Что вызывает разрыв анимации / перехода в компоненте Vue. js?

Question

В переполнении стека есть только один подобный вопрос, но он не применим для моего случая.

Вот мой код:

<template>
    <div class="main">
        <div
            v-if="meeting.participantsTotal === 0"
            class="no-participants"
        >
            No one has joined this meeting yet
        </div>
        <div
            v-else
            class="have-participants"
        >
            <div
                class="joined-attendees"
                v-if="meeting.participantsActive > 0"
            >
                <div
                    class="collapse-header"
                    @click="toggleJoined()"
                >
                    <span
                        class="icon"
                        :class="isJoinedCollapsed ? 'icon-down-open-big' : 'icon-up-open-big'"
                        v-show="meeting.participantsActive > 0"
                    ></span>
                    Joined Attendees
                </div>

                <transition name="slide" mode="out-in">
                    <div
                        class="collapse-body"
                        v-show="!isJoinedCollapsed"
                    >
                        Joined content
                    </div>
                </transition>
            </div>
            <div class="added-attendees">
                <div
                    class="collapse-header"
                    @click="meeting.participantsActive > 0 ? toggleAdded() : ''"
                >
                    <span
                        class="icon"
                        :class="isAddedCollapsed ? 'icon-down-open-big' : 'icon-up-open-big'"
                        v-show="meeting.participantsActive > 0"
                    ></span>
                    Added Attendees <span v-show="meeting.participantsActive > 0">(Not joined yet)</span>
                </div>

                <transition name="slide" mode="out-in">
                    <div
                        class="collapse-body"
                        v-show="!isAddedCollapsed"
                    >
                        Added content
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            "isAddedCollapsed": false,
            "isJoinedCollapsed": false,
        };
    },
    "computed": {
        meeting () {
            return this.$store.state.meeting;
        },
    },
    mounted () {
        this.$nextTick(() => {
            console.log(this.meeting);
        });
    },
    "methods": {
        toggleAdded () {
            this.isAddedCollapsed = !this.isAddedCollapsed;
        },

        toggleJoined () {
            this.isJoinedCollapsed = !this.isJoinedCollapsed;
        },
    },
};
</script>

<style lang="scss" scoped>

@import '~scss/colors.scss';

.main{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 1em;
    text-align: left;
}

.no-participants{
    margin-left: 2em;
    margin-right: 2em;
    font-size: 1.7em;
    opacity: 0.5;
    color: white;
    padding-bottom: 1em;
    border-bottom: 1px solid $greyBorder;
}

.have-participants{
    margin-left: 2em;
    margin-right: 2em;
}

.collapse-header{
    font-size: 1.5em;

    span {
        opacity: 0.5;
    }
}

.collapse-body{
    padding: 1em;
    border: 1px solid $greyBorder;
}


.slide-enter-active {
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -moz-transition-timing-function: ease-in;
   -webkit-transition-timing-function: ease-in;
   -o-transition-timing-function: ease-in;
   transition-timing-function: ease-in;
}

.slide-leave-active {
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-enter-to, .slide-leave {
   max-height: 20vh;
   overflow: hidden;
}

.slide-enter, .slide-leave-to {
   overflow: hidden;
   max-height: 0;
}
</style>

А вот ГИФ, что бывает:

Это просто простой коллапс с использованием компонента <transition>. Я использовал его раньше, но теперь я попытался использовать снова, и теперь я понятия не имею, что может быть причиной.

Спасибо за ваше внимание!