vue-material-year-calendar 插件 activeDates.push(dateInfo)数据后日历上不显示选中？

Question

https://github.com/reinerBa/vue-material-year-calendar?tab=readme-ov-file
我是按照官方文档上写demo，activeDates点击的日期已经在数组里，但日历上不显示选中状态

按官方文档，data初始化时的值是正常的，是什么原因？谢谢。

    <YearCalendar
      v-model="year"
      :activeDates.sync="activeDates"
      @toggleDate="toggleDate"
      prefixClass="your_customized_wrapper_class"
      :activeClass="activeClass"
    ></YearCalendar>

  data() {
    return {
      year: 2019,
      activeDates: [
        { date: '2019-02-13' },
        { date: '2019-02-14', className: 'red' },
        { date: '2019-02-15', className: 'blue' },
        { date: '2019-02-16', className: 'your_customized_classname' }
      ],
      activeClass: '',
    }
  },

    // 这里是点击日期的事件
    toggleDate(dateInfo) {
      const index = this.activeDates.indexOf(dateInfo)
      if (index === -1) {
        // 将日期push到选中 activeDates 内
        this.activeDates.push(dateInfo)
        console.log(dateInfo)
        console.log(this.activeDates); // activeDates点击的日期已经在数组里，但日历上不显示选中状态
      } else {
        this.activeDates.splice(index, 1)
      }
    }

Answer 1

找到问题了：
vue2方法：

<YearCalendar
      v-model="year"
      :activeDates="activeDates"
      @toggleDate="toggleDate"
      prefixClass="your_customized_wrapper_class"
      :activeClass="activeClass"
    ></YearCalendar>

vue3方法:
关键是: ref[...]

const activeDates: { date: string; selected: boolean; className?: string }[] = ref([
  { date: '2024-02-13', selected: true, className: '' },
  { date: '2024-02-14', className: 'red' },
  { date: '2024-02-15', className: 'blue' },
  { date: '2024-02-16', className: 'your_customized_classname' }
])