fix: missing key in loops

components/CarouselPagination.vue

@@ -2,6 +2,7 @@
   <div class="flex flex-row flex-wrap gap-2 justify-center">
     <button
       v-for="(_, i) in amount"
+      :key="i"
       @click="() => slideTo(i)"
       :class="[
         carousel.currentSlide == i ? 'bg-blue-600 w-6' : 'bg-zinc-700 w-3',

components/Notification.vue

@@ -17,6 +17,7 @@
               v-for="[name, link] in notification.actions.map((e) =>
                 e.split('|')
               )"
+              :key="name"
               type="button"
               :href="link"
               class="rounded-md text-sm font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"

components/UserHeader.vue

@@ -8,6 +8,7 @@
         <ol class="inline-flex items-center gap-x-12">
           <NuxtLink
             v-for="(nav, navIdx) in navigation"
+            :key="navIdx"
             :href="nav.route"
             :class="[
               'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',
@@ -141,6 +142,7 @@
                 <ol class="flex flex-col gap-y-3">
                   <NuxtLink
                     v-for="(nav, navIdx) in navigation"
+                    :key="navIdx"
                     :href="nav.route"
                     :class="[
                       'transition hover:text-zinc-200 uppercase font-display font-semibold text-md',

components/UserHeader/NotificationWidgetPanel.vue

@@ -24,6 +24,7 @@
     <div class="flex flex-col gap-y-2 max-h-[300px] overflow-y-scroll">
       <Notification
         v-for="notification in props.notifications"
+        :key="notification.id"
         :notification="notification"
       />
     </div>

components/UserHeader/UserWidget.vue

@@ -41,6 +41,7 @@
           <div class="flex flex-col">
             <MenuItem
               v-for="(nav, navIdx) in navigation"
+              :key="navIdx"
               v-slot="{ active, close }"
               hydrate-on-visible
             >