Rendering Repeating Dates in V-Calendar DatePicker Component

I’m in the process of upgrading from v-calendar v3.0.0-alpha.8 to v-calendar v3.1.0 and trying to recreate my previous calendar from scratch rather than try to migrate it. In the process, I’m running into a rendering issue that I can’t seem to get past. I’m starting with three repeating date objects (New Years, 4th of July, and Christmas), several of which don’t render as expected. If I include only the first object, it renders properly (I plan to have many more than the three shown here). I’m using the latest docs which are for v3.0.3.

ChartCalendar.vue

<template>
  <div class="calendar">
    <DatePicker
        borderless
        is-dark="system"
        :attributes="attrs"
        :columns="5"
        :rows="2"
    />
  </div>
</template>

<script>
import { DatePicker } from "v-calendar";
import 'v-calendar/dist/style.css'

export default {
  name: "ChartCalendar.vue",
  components: {
    DatePicker,
  },
  data() {
    return {
      attrs: [
        {
          dates: [
            {
              start: new Date(2023, 0, 1),
              repeat: { every: "year", days: 1, months: 1, },
            },
          ],
          highlight: "green",
          popover: { label: "New Years" },
        },
        {
          dates: [
            {
              start: new Date(2023, 6, 4),
              repeat: { every: "year", days: 4, months: 7, },
            },
          ],
          highlight: "red",
          popover: { label: "4th of July" },
        },
        {
          dates: [
            {
              start: new Date(2023, 11, 25),
              repeat: { every: "year", days: 25, months: 12, },
            },
          ],
          highlight: "blue",
          popover: { label: "Christmas" },
        },
      ],
    };
  },
};
</script>

<style>
</style>

Here are a few examples of problems I’m seeing:

• The first holiday appears as expected on 2023-01-01, but has two labels. [right color, right label, wrong number of labels]

• The second holiday appears on 2023-07-04, but it’s colored green (instead of red) and it has two hover labels that say, “New Years” (instead of “4th of July”). [wrong color, wrong label, wrong number of labels]

• The next holiday appears as expected on 2023-12-25. [right color, right label, right number of labels]

• The next holiday appears on 2024-01-01, but has two hover labels. [right color, right label, wrong number of labels.

Hopefully, there’s a simple explanation for this behavior (like a syntax error) but I haven’t been able to figure out what’s causing it).

Some supplementary information should it prove relevant.

package.json

{
  "author": "Daves Calendar",
  "license": "MIT",
  "name": "my spa",
  "version": "0.1.64",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.0",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.3",
    "chart.js": "^4.2.1",
    "chartjs-adapter-date-fns": "^3.0.0",
    "chartjs-plugin-annotation": "^2.2.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "core-js": "^3.29.1",
    "date-fns": "^2.29.3",
    "swiper": "^9.1.1",
    "v-calendar": "^3.1.0",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Calendar.vue

<template>
  <div class="charts">
    <div class="calendar">
      <Calendar/>
    </div>
  </div>
</template>

<script>
import Calendar from '@/components/ChartCalendar.vue'

export default {
  name: "Calendar.vue",
  data() {
    return {}
  },
  emits: ['page-data'],
  mounted() {

    this.$emit('page-data', {title: 'calendar', content: '',})
  },
  components: {
    Calendar
  },
}

</script>

<style scoped>
.calendar {
  grid-row: 1;
}
.charts {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 100%;
}
</style>