如何在Vue.js上下文中的chartjs中添加日期范围过滤器

import Chart from 'chart.js';
import 'chartjs-plugin-datalabels';

data() {
  return {
    dateRange: null
  };
},

mounted() {
  this.createChart();
},

methods: {
  createChart() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        // 数据配置
      },
      options: {
        // 其他配置
        plugins: {
          datalabels: {
            // 添加过滤器函数
            formatter: (value, context) => {
              // 在这里根据日期范围进行过滤
              if (this.dateRange && context.dataIndex >= this.dateRange[0] && context.dataIndex <= this.dateRange[1]) {
                return value;
              } else {
                return '';
              }
            }
          }
        }
      }
    });
  }
}

<template>
  <div>
    <input type="date" v-model="dateRange[0]">
    <input type="date" v-model="dateRange[1]">
    <canvas id="myChart"></canvas>
  </div>
</template>