Блок чучуть двигается

const app = new Vue({
   el: '#app',
   data() {
     return {
      show: true,
       items: [
         {id: 1, text: 1111},
         {id: 2, text: 2222},
         {id: 3, text: 3333},
         {id: 4, text: 4444},
         {id: 5, text: 5555},
         {id: 6, text: 6666},
         {id: 7, text: 7777},
       ],
     }
   },
  methods: {
    checkBlock(key) {
            if (key === 4){
        this.show = !this.show;
      }
    }
  }
});

.buttons {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}



.buttonsall {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-right: 20px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 8px;
   margin-right: 32px;
   height: 30px;
}

.fade-enter-active {
   transition: all 0.3s ease-out;
}
 
.fade-leave-active {
   transition: all 0.8s cubic-bezier(0.3, -0.05, 0.7, -0.5);
}
 
.fade-leave-to {
   transform: translateY(40px);
}
.fade-leave-to, .fade-enter {
   transform: translateY(40px);
}

.buttons__text {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-size: get-vh(15px);
   line-height: get-vh(18px);
   display: flex;
   align-items: center;
   color: rgba(255, 255, 255, 0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="" id="app">
      <transition-group tag="ul" name="fade" class="buttons">
         <li class="buttonsall"
          v-if="show || item.id === 4" 
          v-for="( item, index ) in items" 
          @click="checkBlock(item.id)"
          :key="item.id">
             <div class="buttons__text">{{ item.text }}</div>
          </li>
      </transition-group> 
   </div>