title: Vue ChartJS not rendering when page reloads
body: <p>This problem may seem to already exist but I also tried those and some are inactive now. My goal is to make the chart reactive whenever the page reloads. I tried to the solution from the Vue page itself i.e. add watchers and mixins but it doesn't work, as commented by others stuck like me. Mine only render if I change the width and height of the chart but everytime I refresh it, it disappears.</p>
  <p>Dashboard.vue</p>
  <pre><code>&lt;template&gt;
     &lt;div align=&quot;center&quot;&gt;
                &lt;LineChart :chartData=&quot;chartData&quot; :options=&quot;options&quot; style=&quot;width:auto;height:auto;&quot; /&gt;
              &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data() {
      return {
        chartData: {
          labels: [],
          datasets: [
            {
              data: [],
              backgroundColor: &quot;#3498db&quot;,
              borderColor: &quot;rgba(136,136,136,0.5)&quot;,
              label: &quot;&quot;,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          title: {
            display: true,
            text: &quot;Student's Score Chart&quot;,
          },
          tooltips: {
            mode: &quot;index&quot;,
            intersect: false,
          },
          hover: {
            mode: &quot;nearest&quot;,
            intersect: true,
          },
          scales: {
            xAxes: [
              {
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: &quot;Student Names&quot;,
                },
              },
            ],
            yAxes: [
              {
                display: true,
                scaleLabel: {
                  display: true,
                  labelString: &quot;Score Points&quot;,
                },
              },
            ],
          },
        },
     mounted() {
      this.getListData();
    },
     methods: {
        getListData() {
        axios
          .get(&quot;http://localhost/MyComposer/&quot;, {
            params: {
              answerId: 6,
              token: this.token,
            },
          })
          .then((response) =&gt; {
            console.log(response.data);
            for (var k = 0; k &lt; response.data.length; k++) {
              const fullName =
                response.data[k].FirstName +
                &quot; &quot; +
                response.data[k].MiddleName +
                &quot; &quot; +
                response.data[k].LastName;
  
              this.chartData.labels.push(
                fullName + &quot; (&quot; + response.data[k].TestName + &quot;) &quot;
              );
              this.chartData.datasets[0].data.push(response.data[k].Score);
              console.log(this.chartData);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
  }
  }
  </code></pre>
  <p>ChartContainer.js</p>
  <pre><code>import { Line, mixins } from 'vue-chartjs'
  
  export default {
    extends: Line,
    mixins: [mixins.reactiveProp],
    props: ['chartData', 'options'],
    mounted () {
      this.renderChart(this.chartData, this.options)
    },
    watch: {
      chartData () {
        this.renderChart(this.chartData, this.options)
      }
    }
  }
  
  </code></pre>