I tried to make an animation, but this not working. Also I tried `transition-group`. How can I improve this code to do it workable?
It shows two diffetent lists based on category of data from my `data.json.js` file.

Also with `transition-group` tag it has error:
`<transition-group> children must be keyed: <li>`

template

```
<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>

```

script

```
data() {
    return {
        switcher: true,
    }

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

```

style

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

```