Nested transition modal - vue.js

Question

i'm creating modal with vuejs and following this example but i create a separated file for modal so i can simply call my modal component anywhere i need to like this
here is my modal.vue
<template>
<div class="modal-mask" #click="close">
<div class="modal-dialog" :class="size">
<div class="modal-content">
<div class="modal-header" :class="color">
<button type="button" class="close" #click="close">×</button>
<h6 class="modal-title">{{ title }}</h6>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="button"></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['title','color','size'],
methods: {
close(){
this.$emit('close');
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s ease;
}
</style>
and in index.vue where i want to call it i just simply
<app-modal
:title="modalTitle"
:size="modalSize"
:color="modalColor"
v-if="modalShow"
#close="modalShow = false"
>
</app-modal>
now my question is i want to use 2 kind of transition, first is in my index.vue page
<transition name="modal">
<app-modal
:title="modalTitle"
:size="modalSize"
:color="modalColor"
v-if="modalShow"
#close="modalShow = false"
>
</app-modal>
</transition>
and the second one is in my modal.vue like this
<template>
<div class="modal-mask" #click="close">
<transition name="modal-inside">
<div class="modal-dialog" :class="size">
<div class="modal-content">
<div class="modal-header" :class="color">
<button type="button" class="close" #click="close">×</button>
<h6 class="modal-title">{{ title }}</h6>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="button"></slot>
</div>
</div>
</div>
</transition>
</div>
</template>
why i want it like that well simply because in there is modal-mask class that warp entire modal and that css class is add some dark/shade background so user can focus on the modal.... exactly like bootstrap modal fade effect and then after that i want everything inside div modal-dialog to show/transition after modal-mask is already finished its transition
so it will just first darken background and then show modal... they move separately one after another.. not at the same time
or to be more easy to imagine it i want to generate exactly like bootstrap modal