Я хочу анимировать элементы списка (в данном случае кавычки) с помощью переходной группы (vue js)

Question

Я хотел оживить кавычки, добавленные пользователем с помощью transition-group, но код работает некорректно.

    <transition-group name="fade" tag="div" class="row">
        <Quote v-for="(quote, index) in quotes" :key="index + 1" @click.native="removeQuote(index)">
           {{ index + 1 }}. {{ quote }}
        </Quote> 
    </transition-group>

Это мой код. Я хочу иметь плавную анимацию появления при добавлении нового элемента и постепенное исчезновение при удалении одного. Спасибо!