vueのtransitionでモーダルを実装したいのですが、モーダルを子コンポーネントにしてフラグを渡して表示切り替えしようとすると、transitionが効きません

vueのtransitionでモーダルを実装したいのですが、モーダルを子コンポーネントにして、親から子に表示用フラグを渡して表示切り替えしようとすると、transitionが効きません。
どのようにすればできるでしょうか？

下記が実装しているモーダルのtransitionになります。
propsなどの記述は済んでいる前提になります。
よろしくお願い致します。

// pug使用
// 親コンポーネント

div.show(@click="shoModal = true")
Modal(:isModal="showModal")
 div
   p hoge
   p foo

Modal.vue
1// pug使用
2// 子コンポーネント
3
4<template lang="pug">
5  section#modal
6    transition(name="hoge")
7      div
8        .modal-mask
9        .modal-wrapper(v-if="isModal")
10          .modal-container
11            .modal__body
12              slot
13</template>
14
15<style>
16.hoge-enter {
17  opacity: 0;
18}
19.hoge-leave-active {
20  opacity: 0;
21}
22.hoge-enter .modal-container,
23.hoge-leave-active .modal-container {
24  -webkit-transform: scale(1.1);
25  transform: scale(1.1);
26}
27</style>