Notification.vue: transition via vuejs, trying to generate unique key

src/components/Notification.vue

@@ -1,17 +1,15 @@
 <template>
 
-<div class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
-    <transition-group name="fade">
-        <div v-for="(note, index) in notifications" :key="index" data-bs-delay="2000" data-bs-autohide="true" class="show fade toast border-0 text-white" :class="toastClasses(note.type)" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="d-flex">
-            <div class="toast-body">
-                {{note.text}}
-            </div>
-            <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+    <transition-group name="toasts" tag="div" class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
+        <div v-for="(note, index) in notifications" :key="note.randomKey" class="show toast border-0 text-white" :class="`bg-${note.type}`" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                    {{note.text}}
+                </div>
+                <button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto"></button>
             </div>
         </div>
     </transition-group>
-</div>
 
 </template>
 
@@ -26,16 +24,23 @@ function destroyAlert(index : number) {
     notes.removeAlert(index)
 }
 
-function toastClasses(type : string){
-    return {
-        'bg-danger': type === 'danger',
-        'bg-success' : type === 'success',
-        'bg-warning' : type === 'warning'
-    }
-}
-
 </script>
 
 <style scoped>
 
+.toast-container {
+    z-index: 10000;
+}
+
+.toasts-move {
+    transition: transform 0.8s ease;
+}
+
+.toasts-enter-active, .toasts-leave-active {
+  transition: opacity 0.7s;
+}
+.toasts-enter-from, .toasts-leave-to /* .list-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
 </style>