Как создать анимацию для элемента «v-for» с помощью оператора «v-if» во Vue?

Я пытался сделать анимацию, но ничего не вышло. Также попробовал transition-group. Как я могу улучшить этот код, чтобы он стал работоспособным? Он показывает два разных списка в зависимости от категории данных из моего файла data.json.js.

Также с тегом transition-group есть ошибка: <transition-group> children must be keyed: <li>

шаблон

<button @click = "switcher = !switcher">SWITCH</button>

<transition name = "fade">
    <li v-for = "elements in myData" v-if = "elements.key == getKey()">
        <span>{{elements.title}}</span>
    </li>
</transition>

сценарий

data() {
    return {
        switcher: true,
    }

getKey(){
    if (this.switcher) {
        return 'KEY'
    } else {
        return 'ANOTHER KEY'
    }

стиль

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave {
  opacity: 0;
}