JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <div>
    <button
      @click="run"
      :disabled="numShow > 0 && numShow < items.length"
    >run</button>
  </div>
  <transition-group
    name="item"
    @after-enter="showNext"
    @after-leave="hidePrev"
  >
    <div 
      v-for="(n, i) in itemsToShow"
      v-text="n.text"
      :key="n.id"
      class="item"
    ></div>
  </transition-group>
</div>

CSS

.item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: red;
  color: white;
}

.item-enter-active,
.item-leave-active {
  transition: opacity 0.4s;
}
  
.item-enter,
.item-leave-to {
  opacity: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    items: Array.from({ length: 10 }, (n, i) => ({
      id: i + 1,
      text: String.fromCharCode(65 + i),
    })),
    numShow: 0,
  }),
  computed: {
    itemsToShow() {
      return this.items.slice(0, this.numShow);
    },
  },
  methods: {
    run() {
      this.numShow += ({
        0: 1,
        [this.items.length]: -1,
      })[this.numShow] || 0;
    },
    showNext() {
      this.numShow = Math.min(this.items.length, this.numShow + 1);
    },
    hidePrev() {
      this.numShow = Math.max(0, this.numShow - 1);
    },
  },
  mounted() {
    this.run();
  },
});