JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div id="app">

  <button @click="toggle = !toggle">SWITCH</button>
    
  <transition-group name="fade" tag="ul">
    <li v-for="n in filteredItems" :key="n.id">
    	<span>{{ n.title }}</span>
    </li>
  </transition-group>

</div>

SCSS

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

JavaScript

new Vue({
  el: '#app',
  data: {
    items: [
      { id:  99, title: 'aaa', key: 'KEY' },
      { id:   7, title: 'bbb', key: 'ANOTHER KEY' },
      { id:  28, title: 'ccc', key: 'KEY' },
      { id: 235, title: 'ddd', key: 'KEY' },
      { id:  64, title: 'eee', key: 'ANOTHER KEY' },
    ],
  	toggle: true,
  },
  computed: {
    filteredItems() {
      const key = this.toggle ? 'KEY' : 'ANOTHER KEY';
      return this.items.filter(n => n.key === key);
    },
  },
});