How to store dynamic references inside a loop and watch them?

I’m using Vue3 with a UI framework that doesn’t support stacked snackbars ( only one ). I’m trying to generate multiple ones and apply a custom margin to achieve the desired behaviour.

When creating the notification components I want to store their reference to the DOM element, so I can watch this collection and perform the custom CSS. I followed function-refs

Reproduction link

<script setup>
import { ref, onMounted, watch } from 'vue'

const items = ref(new Map())
const itemReferences = ref(new Map())

onMounted(() => {
  for(let i = 0; i < 5; i++) {
    const itemId = self.crypto.randomUUID();
    
    items.value.set(itemId, "message for id" + itemId);
  }
});

watch(itemReferences, () => {
  let divIndex = 0;
  
  for (const [key, divElement] of itemReferences.value) {
    console.log("perform CSS code on divElement here");
    
    divIndex++;
  }
}, { immediate: true });
</script>

<template>
  <div v-for="[key, value] in items" :key="key" :ref="(divElement) => { itemReferences.set(key, divElement) }">{{ value }}</div>
</template>

but unfortunately the watcher never runes. Do you have any ideas what’s wrong or missing?