VueCLIでルートコンポーネントから読み込む子コンポーネントに設定した<transition>が適用されない。

前提・実現したいこと

ルートコンポーネントから子コンポーネントを読み込み、loadしたタイミングで子コンポーネントがフェードインします。
その子コンポーネントの中の一部の要素に更にスライドアニメーションを加えようとしているのですが、思い通りに行きません。
初学者故に変なコードの書き方になっているかもしれませんが、お目溢しいただければと思います。
単純化のために一部のコードだけを載せますが情報に不足等ありましたら指摘していただけると助かります。

該当のソースコード

vue:
1<template>
2  <ContentsSuggest v-show="show"></ContentsSuggest>
3</template>
4
5<script>
6  import ContentsSuggest from './components/ContentsSuggest.vue'
7  export default {
8    name: 'App',
9    components: {
10      ContentsSuggest,
11    },
12    data() {
13      return {
14        show: false,
15      }
16    },
17    created() {
18      addEventListener('load', this.showSuggest);
19    },
20    methods: {
21      showSuggest: function() {
22        this.show = true
23    }
24  }
25</script>

vue:ContentsSuggest
1<template>
2  <transition name="fade">　// #1
3    <div>
4      <transition name="slide"> // #2
5        <ul class="flex text-center" id="suggestIcons" v-show="slide">
6          <li><i class="material-icons">{{ icon }}</i></li>
7          <li><i class="material-icons">{{ icon }}</i></li>
8          <li><i class="material-icons">{{ icon }}</i></li>
9        </ul>
10      </transition>
11      <p class="text-center">Please click icon.</p>
12    </div>
13  </transition>
14</template>
15<script>
16export default {
17  data() {
18    return {
19      icon: 'keyboard_arrow_up',
20      slide: false
21    },
22    mounted() {
23      this.slide = true
24    },
25  },
26}
27</script>
28<style lang="scss" scoped>
29  .fade-enter-active,
30  .fade-leave-active {
31    will-change: opacity;
32    opacity: 1;
33    transition: opacity 2s cubic-bezier(0.3, 0, 0.4, 0) 0ms;
34  }
35
36  .fade-enter,
37  .fade-leave-to {
38    opacity: 0;
39  }
40
41  .slide-enter-active,
42  .slide-leave-active {
43    will-change: transform;
44    transform: translateY(-30px);
45    transition: opacity 2s transform 3s;
46  }
47
48  .slide-enter,
49  .slide-leave-to {
50    transform: translateY(0);
51    opacity: 0;
52  }

発生している問題・エラーメッセージ

エラーメッセージはありません。
ここでの#1のフェードインは機能しているのですが、#2のスライドが機能しません。

試したこと

DOMの状況を見るとv-enter-activeなどのクラス自体が付与されていません。
<transition>が入れ子になっているのが問題かとも思ったのですが、#1の<transition>を消しても変わりありません。
mounted() { this.slide = true }は機能しています。

今回がVueCLIを使った初めての開発だったので、いろんな可能性を考えて少しずつ書き換えながら、タグの位置や要素の追加・削除、親からプロパティを受け渡してみたりしましたがうまくいきませんでしたので質問投稿をさせていただいています。どうぞよろしくお願いいたします。