add fade in out on dropdown menu with Vue Transition

Built a dropdown menu but the sub or sub sub menu items close too quickly causing issues getting to other menu items when stacked vertically. I tried wrapping the second and third level items so subs and sub subs with Transition but it does not seem to work for dropdown items. See code here:

<!-- LEVEL 1 -->
    <ul class="menu" :class="moduleInstance.menuType" 
        v-show="showMenu"
        :style="menuLevel1Style()">
      <li v-for="(menu, index) in menuStructure" 
        @mouseenter="mouseEntered(menu)" 
        @mouseleave="mouseLeft(menu)"
        :class="activePreset(menu)" 
        :style="level1Style(menu, index)" 
        :key="index"
        >
        <div class="menu-item" >{{ menu.name }}</div>
            <!-- LEVEL 2 -->
            <Transition :duration="500" name="nested">
                <div v-if="menu.children.length > 0" 
                v-show="menu.mouseOver" 
                :style="menuLevel2Style('outside')"
                >
                    <ul :style="menuLevel2Style()">
                        <li 
                        v-for="(child, childIndex) in menu.children" 
                            @mouseenter="mouseEntered(child)" 
                            @mouseleave="mouseLeft(child)"
                            :class="activePreset(child)" 
                            :style="level2Style(child)" :key="childIndex">
                            <div class="menu-item" >{{ child.name }}</div>
                            <!-- LEVEL 3 -->                           
                                <ul v-if="child.children.length > 0" v-show="child.mouseOver" 
                                    :style="menuLevel3Style()" >
                                    <li v-for="(subsub, subIndex) in child.children" 
                                        :class="activePreset(subsub)"
                                        :key="subIndex"
                                        :style="level3Style(subsub)"
                                        @mouseenter="mouseEntered(subsub)"
                                        @mouseleave="mouseLeft(subsub)">
                                        <div class="menu-item" >{{ subsub.name }}</div>
                                    </li>
                                </ul>                           
                        </li>
                    </ul>
                </div>
            </Transition>
      </li>
    </ul>
...
.nested-enter-active, .nested-leave-active {
	transition: all 0.5s ease-out;
    }

    .nested-enter-from, .nested-leave-to {
    opacity: 0;
    }

Code partly works, but does not seem to work for third level. I am kind of new to Vue transitions. Any idea what I am missing here?