графики с mdboostrap vuejs

Question

Я пытаюсь добавить диаграмму с mdboostraps в код VueJS, но я не могу изменить данные ...

Я использовал эту библиотеку с реакцией, но с vuejs это невозможно. Линейные данные DATA определены, и я не могу изменить их с помощью любой «переменной состояния», чтобы показать графики различий во фронте vue ...

<script>


import { mdbLineChart, mdbContainer } from 'mdbvue';
  export default {
    name: 'ChartPage',
    components: {
      mdbLineChart,
      mdbContainer
    },
    data() {
      return {
        lineChartData: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "My First dataset",
              backgroundColor: "rgba(255, 99, 132, 0.1)",
              borderColor: "rgba(255, 99, 132, 1)",
              borderWidth: 0.7,
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "My Second dataset",
              backgroundColor: "rgba(151,187,205,0.2)",
              borderColor: "rgba(151,187,205,1)",
              borderWidth: 0.8,
              data: [28, 48, 40, 19, 86, 27, 90]
            }
          ]
        },
        lineChartOptions: {
          responsive: false,
          maintainAspectRatio: false,
          scales: {
            xAxes: [{
              gridLines: {
                display: true,
                color: "rgba(0, 0, 0, 0.1)"
              }
            }],
            yAxes: [{
              gridLines: {
                display: true,
                color: "rgba(0, 0, 0, 0.1)"
              }
            }]
          }
        }
      };
    }
  }
</script>

Help !!!