How to use a transition when the data within a slot changes on Nuxt3/Vue3

I cannot seem to get my app to transition on a route change because I am using a default layout and this is the same for each route. I want the content within the slot to transition as the routes change without the layout having to be reloaded/transitioned as well.

layouts/default.vue

<template>
    <div class="bg-darkSecondary dark:bg-black h-screen">
        <teleport to="body">
            <transition name="modal-fade">
                <div v-if="uiStore.functionLoading" class="modal-backdrop">
                    <UiBaseSpinner></UiBaseSpinner>
                </div>
            </transition>
        </teleport>
        <UiNav class="dark:bg-darkBg dark:text-darkSecondary" />
        <div class="flex dark:bg-black bg-darkSecondary">
            <transition name="sidebar" mode="out-in">
                <UiSideNav v-if="uiStore.sidebar" />
            </transition>
            <transition name="fade" mode="out-in">
                <div
                    v-if="!uiStore.appLoading"
                    class="flex-grow max-w-full max-h-full bg-darkSecondary dark:bg-black trans"
                >
                    <transition name="fade" mode="out-in" appear>
                        <div>
                            <slot />
                        </div>
                    </transition>
                </div>
                <div v-else class="flex flex-grow mt-40 justify-center trans">
                    <UiBaseSpinner />
                </div>
            </transition>
        </div>
        <UiFooter class="fixed bottom-0" />
    </div>
</template>

I am specifically trying to get the below slot to have a transition everytime the data cheanges within it, example is if I were to change routes then the content within the slot will change, but i cannot understand how to apply a tranisition because nothing is technically being removed fro the DOM the Slot is just be rendered with difrerent data if I am not mistaken.

layouts/default.vue

<transition name="fade" mode="out-in">
    <div v-if="!uiStore.appLoading" class="flex-grow max-w-full max- 
       h-full bg-darkSecondary dark:bg-black trans">
            <transition name="fade" mode="out-in" appear>
                <div>
                    <slot />
                </div>
            </transition>
        </div>
        <div v-else class="flex flex-grow mt-40 justify-center 
         trans">
            <UiBaseSpinner />
        </div>
</transition>