Обновить диаграмму с помощью ChartJS - VueJS

поэтому у меня возникают проблемы при попытке обновить диаграмму с помощью VueJS и ChartJS. В настоящее время я выполняю запрос ajax (используя axios) и пытаюсь нарисовать диаграмму из возвращенных данных.

Проблема в том, что при попытке нарисовать диаграмму я получаю следующую ошибку: TypeError: Cannot read property 'getContext' of undefined at eval (App.vue?26cd:520). Я действительно не знаю, почему это происходит, я читал некоторые другие сообщения, но все еще не могу заставить его работать. Это код, который я использую:

<template>
  <button @click = "myFunction()">Click Me</button>
  <canvas ref = "myChart"></canvas>
</template>
-----------------------------------------------------------

methods: {
  myFunction () {
    var self = this

    axios.post('http://localhost/link/to/file.php', {
      // Post params here
    }).then(response => {
      var ctxChart = self.$refs.myChart.getContext('2d')

      var myChart = new Chart(ctxChart, {
        type: 'pie',
        data: {
          labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4'],
          datasets: [{
            label: 'Label here',
            data: [response.data['data1'], response.data['data2'], response.data['data3'], response.data['data4']],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
        }
      })

    }).catch(e => {
      console.info(e)
    })
  }
}

Любая помощь приветствуется! :)