V-calendar: 1.0.0-beta.6 change the attributes property does not trigger view update

[imgss]

here is my code：

<template>
 ...
    <vCalendar ref="vCalendar" i:from-date="new Date()" :attributes='attrs' @dayclick="handleClick"/>
</template>

<script>
  export default {
    data () {
      return {
        attrs: [{
          dot: true,
          dates: [],
        }, {
          highlight: 'blue',
          dates: new Date
        }]
      }
    },
    methods: {
        handleClick(event) { 
                let {year, month, day} = event
                this.attrs[1].dates = new Date(year, month, day) // here the view is not change
        }
    }
</script>

the attributes is changed, but the calendar is not change.and I tried to watch attributes in deep can fix this.

watch: {
    attributes: {
        deep: true,
        handler() {
            this.refreshAttrs({
                  resetPages: true
            });
        }
    }
}

[nathanreyes]

So there are 2 problems here.

First, when you do the following

this.attrs[1].dates = ...

you are modifying an property on an array element object, not modifying the array itself. Vue won't detect the change, so the UI doesn't get refreshed.

Second, when you extract the month parameter from the handleClick event parameter, this value is 1-indexed, so you need to subtract 1 for your new date.

This should get you going

    handleClick(event) {
      let { year, month, day } = event;
      // this.attrs[1].dates = new Date(year, month, day);
      // Need to create new array so Vue detects changes
      const attrs = this.attrs.slice();
      // Need to subtract 1 from month because it is 1-indexed
      attrs[1].dates = new Date(year, month - 1, day);
      // Now we can reassign attributes
      this.attrs = attrs;
    }

[imgss]

thanks!