Show b-popover when hovering over fullcalendar item

Question

I am using bootstrap vue popover in combination with Fullcalendar (v5) in my Vue (nuxt) application.

According to bootstrap vue's documentation for popover, it needs to be mounted to a unique ID before mounted.

However, when my calendar is for example in Month view and it spans 2 or more months, the eventContent() event will be triggered twice (once for each week in this example). And thus I don't have a unique ID to bind the popover to.

This is the code I have:

<template>
  <div>
    <FullCalendar v-if="mounted" :options="calendarOptions" />
    <b-popover
      v-for="item of calendarItems"
      :key="'popover_'+item.id"
      :target="'item_'+item.id"
      triggers="hover"
      container="page-container"
      placement="bottomleft"
    >
      <calendar-item-popover-content :calendar-item="item" />
    </b-popover>
  </div>
</template>

And this is the event which sets an ID to the calendar item, which matches the calendarItems id.

eventContent (args) {
      if (args.event.extendedProps) {
        let props = args.event.extendedProps
        let titleHtml = document.createElement('div')

        let startTime = new Date(args.event.start)
        let startHours = startTime.getHours() < 10 ? `0${startTime.getHours()}` : startTime.getHours()
        let startMinutes = startTime.getMinutes() < 10 ? `0${startTime.getMinutes()}` : startTime.getMinutes()

        let endTime = new Date(args.event.end)
        let endHours = endTime.getHours() < 10 ? `0${endTime.getHours()}` : endTime.getHours()
        let endMinutes = endTime.getMinutes() < 10 ? `0${endTime.getMinutes()}` : endTime.getMinutes()

        if (props.title) {
          titleHtml.innerHTML = `<p class="calendar-custom-text mb-0" id="item_${args.event.id}"><span class="calendar-item-type-dot" style="background-color: ${props.borderColor}"></span> <span class="calendar-item-time">${startHours}:${startMinutes}</span> <span class="calendar-item-title font-weight-bold">${props.title ? props.title : ''}</span></p>`
        } else {
          titleHtml.innerHTML = `<p class="calendar-custom-text mb-0" id="item_${args.event.id}"><span class="calendar-item-type-dot" style="background-color: ${props.borderColor}"></span> <span class="calendar-item-time">${startHours}:${startMinutes} - ${endHours}:${endMinutes}</span></p>`
        }

        let arrayOfDomNodes = [titleHtml]
        return { domNodes: arrayOfDomNodes }
      }
    },

However, when a calendar item spans multiple weeks, this exact method above will launch for each of those weeks, and thus there will be multiple elements with the same ID, and the popover cannot be bound.

An example of the problematic event data looks like this when doing a console.log() in the eventContent function:

as can be seen in the screenshot, this event lasts for 3 weeks and in the eventContent function this will all be seen as a single event, with the same ID. Thus when creating a b-popover and attaching it to the event.id, only the first week (from 8 until 14 in the screenshot) will have the popover effect on hover, the other 2 weeks don't have it. (since they share the same ID)

How do I go around solving this issue?