Why chart don't update?

Question

I am trying to integrate datepicker in my chart. But after selecting dateTo or dateFrom - nothing changes. I have used construction this.chart.update() in watch. I logged this.chart.update(), and I see following:

What I am doing wrong? Why my chart don't update? If put in watch just draw() - charts will be update, but dateTo or dateFrom - will be old (not that I select in datepicker).

    <template>
      <div class="container">
        <h3>Прибыль/посещаемость</h3>
        <date-picker v-model="dateFrom" valueType="date"></date-picker>
        <date-picker v-model="dateTo" valueType="date"></date-picker>
        <canvas ref="mainChart"></canvas>
      </div>
    </template>
    
    <script>
    import Chart from 'chart.js';
    import DatePicker from 'vue2-datepicker';
    import 'vue2-datepicker/index.css';
    
    export default {
      name: 'Analytics-test',
      components: {
        DatePicker
      },
      data: () => ({
        dateFrom: new Date('2021-11-01'),
        dateTo: new Date(),
        flagStartDate: false,
        chartData: null,
        mychart:null,
        labels: [],
        dataset: {},
        draftData: null,
        data: [],
        datacollection: [],
        clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
      }),
      methods: {
        draw() {
          if (this.mychart) {
            this.mychart.destroy();
          }
          const ctx = this.$refs.mainChart;
          this.mychart = new Chart(ctx,
            {
              type: 'line',
              data: {
                labels: this.labels,
                datasets: this.datacollection
              },
              options: {
                legend: {
                  display: true,
                  position: 'bottom',
                },
                responsive: true,
                elements: {
                },
                scales: {
                  xAxes: [{
                    type: "time",
                    display: true,
                    scaleLabel: {
                      display: false,
                    },
                    ticks: {
                      major: {
                        fontStyle: "bold",
                        fontColor: "#FF0000"
                      }
                    }
                  }],
    
                  yAxes: [
                    {
                      id: 'y1',
                      type: 'linear',
                      position: 'left',
                      display: false
                    },
                    {
                      id: 'y2',
                      type: 'linear',
                      position: 'right',
                      display: false
                    },
                    {
                      id: 'y3',
                      type: 'linear',
                      position: 'left',
                      display: false
                    },
                    {
                      id: 'y4',
                      type: 'linear',
                      position: 'right',
                      display: false
                    },
                    {
                      id: 'y5',
                      type: 'linear',
                      position: 'left',
                      display: false
                    },
    
                    {
                      display: false,
                      gridLines: {
                        display: false
                      },
                      scaleLabel: {
                        display: true,
                        labelString: this.labelY
                      },
                      ticks: {
                        min: 0, 
                        beginAtZero: true,
                        stepSize: 100  
                      }
                    }]
                }
              }
    
            });
        },
        

    participantsCountClub(clubId) {
      switch (clubId) {
        case '5c3c5e12ba86198828baa4a7':
          return { label: "Тренировок на Фрунзенской", borderColor: "#3e95cd", fill: false }
        case '5c3c5e20ba86198828baa4c5':
          return { label: "Тренировок на Чернышевской", borderColor: "#8e5ea2", fill: false };
        case '60353d6edbb58a135bf41856':
          return { label: "Тренировок на Василеостровской", borderColor: "#e8c3b9", fill: false };
        case '61e9995d4ec0f29dc8447f81':
          return { label: "Тренировок на Московской", borderColor: "#3cba9f", fill: false };
        case '61e999fc4ec0f29dc844835e':
          return { label: "Тренировок на Лесной", borderColor: "#c45850", fill: false };
        default:
          return 'Неизвестный клуб';
      }
    },

    async loadTrainings(clubsId) {
      try {
        for (let clubId in clubsId) {
          clubId = clubsId[clubId]
          let dateFrom = this.dateFrom
          let dateTo = this.dateTo
          let groupBy = 'month'
          await this.$store.dispatch('loadAvgSchedule', { clubId, dateFrom, dateTo, groupBy })
          this.draftData = this.$store.state.avgShedule
          if (this.labels.length === 0) {
            this.getDatesAvgIncome()
          }
          this.flagStartDate = true
          await this.getParticipantsCount(clubId)
          this.flagStartDate = false
        }
      } catch (e) {
        console.error(e)
      }
    },

    async getParticipantsCount(clubId) {
      for (let item in this.draftData) {
        let positionDate = this.labels.indexOf(this.draftData[item].date.slice(0, 7))
        if (this.flagStartDate && positionDate > 0) {
          let zerroArray = await this.bindDataDates(positionDate)
          this.data = this.data.concat(zerroArray)
        }
        this.data.push(this.draftData[item].participantsCount)
        this.flagStartDate = false
      }
      this.dataset.data = this.data
      Object.assign(this.dataset, this.participantsCountClub(clubId))
      Object.assign(this.dataset, { yAxisID: 'y5', hidden: true })
      this.datacollection.push(this.dataset)
      this.data = []
      this.dataset = {}
    },


    //omitted other functions..
    
    
      },
    
      watch: {
        dateFrom() {
          console.log('dateFrom changed to', this.dateFrom),
          console.log('this.mychart', this.mychart),
          this.mychart.update()
        },
        dateTo() {
          console.log('dateTo changed to', this.dateTo)
          this.mychart.update()
        }
      },
    
      async mounted() {
        await this.loadIncomings(this.clubsId),
          await this.loadAvgIncomings(this.clubsId),
          await this.loadAvgPayments(this.clubsId),
          await this.loadAvgSchedule(this.clubsId),
          await this.loadTrainings(this.clubsId)
          this.$nextTick(() => {
            this.draw()
          })
      },
    }
    </script>
    
    <style>
    .container form {
      display: flex;
    }
    </style>

I set dateTo and dateFrom in functions(for example loadTrainings()), before it creates request to store (in store this function create axios request to API).

    let dateFrom = this.dateFrom
    let dateTo = this.dateTo
    let groupBy = 'month'
    await this.$store.dispatch('loadAvgSchedule', { clubId, dateFrom, dateTo, groupBy })