Группа переходов Vue.js работает неправильно

Question

У меня есть компонент Vue.js со следующим шаблоном:

<div class="ca-protocol-card--expandable" :class="{'is-expanded': isExpanded}">
        <transition-group appear name="protocolFadeHeight" mode="out-in" tag="div">
            <protocol-card @click.native="toggle" key="false" :protocol="protocol" :theme="getTheme"></protocol-card>
            <div class="ca-grid ca-grid--right ca-col-11" v-if="isExpanded" key="true">
                <expandable-task-card
                    v-for="task, index in taskList"
                    viewType="dashboard"
                    :key="index"
                    :task="task"
                    :taskList="taskList"
                    @taskCardExpanded="onTaskCardExpand"></expandable-task-card>
            </div>
        </transition-group>
    </div>

Его основное поведение таково: - По умолчанию должна быть видна только ProtocolCard. - Если щелкнуть карту, она раскроется, а карты ExpandableTaskCard станут видимыми. - Я бы хотел, чтобы высота постепенно сглаживалась (на самом деле она использует максимальную высоту, а не высоту), поэтому я использую группу перехода.

Переход применяется только к первому компоненту, а не ко всем остальным. Почему это происходит? Что я делаю не так?