Классы перехода Vuejs не применяются к компоненту Vue

Question

Я использую переход VueJs, чтобы сделать компонент appVacancies горка.

<transition name="slide-down" mode="out-in" appear>
  <appVacancies v-if="showVacancies"></appVacancies>
</transition>

Это Vue специфический CSS для перехода

// Slide Down animation
.slide-down-active, .slide-down-leave-active {
  transition: all .5s ease-out;
}

.slide-down-enter, .slide-down-leave-to {
  opacity: 0;
  transform: translateY(20%);
}

На created() крюк жизненного цикла, я просто использую setTimeout() делать showVacancies логическое значение для true,

У меня также есть анимация затухания с похожей конфигурацией, но она работает.

  <transition name="fade">
    <h1 v-if="!showMotion" class="display-2 grad-text mt-4">Welcome!</h1>
  </transition>

   // CSS
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s ease-out;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

Я не знаю, что я делаю здесь не так. Пожалуйста помоги.