Tailwind UI: Why are transitions only working on enter? - vue.js

Question

I am using tailwind ui to create a page using Vue.js - v.2
I've looked over this SO thread and I believe I have my transitions in the correct spot.
When I click the menu to show the <MobileSidebar> component, everything works great. When I close the <MobileSidebar> component, the component is just removed from the screen. I do not see the sidebar "slide" off of the browser.
I'm passing the open state as a prop; emitting the status. That seems to be working fine as well.
How can I allow the transition to render before the element is hidden/removed from view?
App.vue
<template>
<MobileSidebar
:open="sidebarOpen"
#toggle-sidebar="toggleSidebar"
/>
</template>
<script>
...
data: () => ({
sidebarOpen: false,
}),
methods: {
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
},
}
</script>
MobileSidebar.vue
<template>
<div
class="fixed inset-0 flex z-40 lg:hidden"
role="dialog"
aria-modal="true"
v-show="open"
>
<transition
enter-active-class="transition-opacity ease-in-out duration-300"
enter-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity ease-in-out duration-300"
leave-class="opacity-100"
leave-to-class="opacity-0"
>
<div
class="fixed inset-0 bg-gray-600 bg-opacity-75"
aria-hidden="true"
v-show="open"
></div>
</transition>
<transition
enter-active-class="transition ease-in-out duration-300 transform"
enter-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-active-class="transition ease-in-out duration-300 transform"
leave-class="translate-x-0"
leave-to-class="-translate-x-full"
>
<div
class="relative flex-1 flex flex-col max-w-xs w-full bg-white focus:outline-none"
v-show="open"
>
...
</div>
</transition>
</div>
</template>
<script>
...
methods: {
toggleSidebar() {
this.$emit("toggle-sidebar");
},
},
props: {
open: {
type: Boolean,
required: true,
default: false,
},
},
</script>

Answer 1

The issue is still that I didn't have a <transition> wrapping the outter-most div.
This is working properly:
MobileSidebar.vue
<template>
<transition
enter-active-class="transition-opacity ease-linear duration-300"
enter-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity ease-linear duration-300"
leave-class="opacity-100"
leave-to-class="opacity-0"
>
<div
class="fixed inset-0 flex z-40 lg:hidden"
role="dialog"
aria-modal="true"
v-show="open"
>
...
</div>
</transition>