Vue 3 - Transitions not functioning any more

Hello, I am building a Vue / Inertia / Laravel app after completing the Build Modern Laravel Apps With Inertia series to extend the little project I made (mostly to just use & grow my skills practically) - anyway, I have some transitions that worked fine in the project I made whilst doing Vue 3 from Scratch series, however when copied across to the new project they are not working. The only difference is the data is from a Pinia store & not passed into the component as a prop. This is my code (FlashMessage.vue)

<template>
    <Teleport v-if="loaded" to="body">
        <Transition
            enter-from-class="ease-in-out opacity-0 scale-75 translate-y-12"
            enter-to-class="ease-in-out opacity-100 scale-100"
            enter-active-class="transition ease-in-out duration-300 translate-y-0"
            leave-from-class="ease-in-out opacity-100 scale-100 translate-y-0"
            leave-to-class="ease-in-out opacity-0 scale-75 translate-y-12"
            leave-active-class="transition ease-in-out duration-300"
        >
            <div v-if="flash.show">
                <div v-if="flash.success"
                     class="fixed bottom-4 right-4 text-white py-4 px-4 rounded-xl text-md hover:opacity-75 z-50 bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-900 via-slate-900 to-teal-500">
                    {{ flash.success }}
                </div>
                <div v-else-if="flash.error"
                     class="fixed bottom-4 right-4 text-white py-4 px-4 rounded-xl text-md hover:opacity-75 z-50 bg-red-500">
                    {{ flash.error }}
                </div>
                <div v-else-if="flash.warning"
                     class="fixed bottom-4 right-4 text-white py-4 px-4 rounded-xl text-md hover:opacity-75 z-50 bg-yellow-500">
                    {{ flash.warning }}
                </div>
                <div v-else-if="flash.info"
                     class="fixed bottom-4 right-4 text-white py-4 px-4 rounded-xl text-md hover:opacity-75 z-50 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900">
                    {{ flash.info }}
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {useFlashStore} from "@/Stores/FlashStore.js";

// create a ref to track if the component has been loaded
let flash = useFlashStore();

// create a ref to track if the component has been loaded
let loaded = ref(false);

// when the value in the store is set to true and the component is rendered, set loaded to true
onMounted(() => {
    // teleport the component to the body
    loaded.value = true;
    console.log("loading & teleporting component");
});

// watch the value of show and if it is true, set it to false after 3 seconds
watch(
    () => loaded.value,
    (track) => {
        if (track) {
            //hide the message after 3 seconds
            setTimeout(() => {
                // clear the value of the flash message
                flash.error = "";
                flash.success = "";
                flash.warning = "";
                flash.info = "";
                // hide the message
                flash.show = false;
                // unmount the component
                console.log("hiding message");
            }, 3000);
        }
    }
);
</script>

Can you please help me figure out why these transitions don't work when the component is rendered. Thanks in advance!