transition element not working in SSR Nuxt.js

I am using <transition> in a component like below with Nuxt.js

<template>
    <transition name="fade">
        <div class="modal-container h-screen overflow-y-auto" v-show="!!value">
            <close-button @click.native="closeModal()"></close-button>
            <div class="modal w-4/5 mx-auto rounded-sm bg-white p-8" ref="modal">
                <slot></slot>   
            </div>
        </div>
    </transition>
</template>
<script type="text/javascript">
import vModel from '@/helpers/v-model.mixin';
export default{
    mixins: [vModel],
    methods:{
        closeModal(){
            this.updateValue(false);
        }
    }
}
</script>

I am really sure I added the css for <transition name="fade">

.fade-enter{
    .modal{
        opacity: 0;
        margin-top: -10vh;
    }
}
.fade-enter-active{
    .modal{
        animation: drop-fade-in .5s;
    }
}
.fade-enter-to{
    .modal{
        margin-top: 0vh;
        opacity: 1;
    }
}

.fade-leave{
    .modal{
        margin-top: 0vh;
        opacity: 1;
    }
}
.fade-leave-active{
    .modal{
        animation: drop-fade-in .5s reverse;
    }
}
.fade-leave-to{
    .modal{
        opacity: 0;
        margin-top: -10vh;
    }
}

@keyframes drop-fade-in{
    0%{
        opacity: 0;
        margin-top: -10vh;
    }
    100%{
        opacity: 1;
        margin-top: 0vh;
    }
}

.modal-container{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99;
    background-color: rgba(0,0,0,0.618);
    width: 100%;
    padding-top: 10vh;
    .modal{
        box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
        margin-bottom: 10vh;
        transition: opacity .3s ease,
            margin-top .3s ease;
    }
    .close-button{
        position:fixed;
        top: 10vh;
        right: 5vw;
    }
}

then I used it in nuxt-page-component

<modal v-model="show_modal">
    <h1>Modal Content</h1>
</modal>

it works perfectly in SPA which the js will only run in the browser.

But when I try to use the same code in a server-side-render Nuxt.js, the transition do not work, I can't even get the <transition> component in vuejs-devtools.

How can I fix it? I already Google for it but nothing helped. Thanks a lot!