javascript - 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' }])