title: Rerender vue-chart in a nuxt.js project
body: <p>I am working on a nuxt project and need to draw some charts. For that I use vue-chartjs as a plugin. Unfortunately the chart-data is fetched  after the chart is drawn which results in an empty chart. I can't find a way to access the plugin and rerender the chart when the data is ready. Here is the code for the plugin:</p>
  <pre class="lang-js prettyprint-override"><code>// plugins/vue-chart.js
  
  import Vue from 'vue'
  import { Bar, Doughnut, Line, Pie } from 'vue-chartjs'
  
  const registerComponent = function (name, originalComponent) {
    Vue.component(
      name,
      {
        extends: originalComponent,
        props: ['data', 'options'],
        mounted () {
          this.renderChart(this.data, this.options)
        },
        updated () {
          this.renderChart(this.data, this.options)
        }
      }
    )
  }
  
  registerComponent('BarChart', Bar)
  registerComponent('DoughnutChart', Doughnut)
  registerComponent('LineChart', Line)
  registerComponent('PieChart', Pie)
  </code></pre>
  <p>And here is how I use the plugin to draw a line chart:</p>
  <p><code>components/Charts.vue</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;client-only&gt;
      &lt;LineChart :data=&quot;lineData&quot; :options=&quot;options&quot; /&gt;
    &lt;/client-only&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        loading: true,
        lineData: {
          labels: [],
          datasets: [
            {
              label: 'Close',
              data: [],
            },
            {
              label: 'High',
              data: [],
            },
          ],
        },
        options: {
          responsive: true,
          scales: {
            x: {
              display: true,
              title: {
                display: true,
              },
            },
            y: {
              display: true,
              title: {
                display: true,
                text: 'Value',
              },
            },
          },
        },
      }
    },
    async mounted() {
      try {
        const response = await this.$axios.get('/api/entries')
        if (response.status === 200) {
          for (let i = 0; i &lt; response.data.length; i++) {
            this.lineData.labels.push(response.data[i].date)
            this.lineData.datasets[0].data.push(response.data[i].close)
            this.lineData.datasets[1].data.push(response.data[i].high)
          }
        }
      } catch (e) {
        console.log(e)
      }
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>I am happy about any suggestions on how to solve this!</p>
  <p><strong>Edit</strong>
  I had to downgrade the versions of <code>chart.js</code> and <code>vue-chartjs</code> so that the project compiles.</p>
  <p>Here is my <code>package.json</code></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;xyz&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev-fe&quot;: &quot;nuxt&quot;,
      &quot;build&quot;: &quot;nuxt build&quot;,
      &quot;start&quot;: &quot;nuxt start&quot;,
      &quot;generate&quot;: &quot;nuxt generate&quot;,
      &quot;lint:js&quot;: &quot;eslint --ext \&quot;.js,.vue\&quot; --ignore-path .gitignore .&quot;,
      &quot;lint&quot;: &quot;npm run lint:js&quot;
    },
    &quot;dependencies&quot;:
      &quot;@nuxtjs/axios&quot;: &quot;^5.13.6&quot;,
      &quot;chart.js&quot;: &quot;^2.7.1&quot;,
      &quot;core-js&quot;: &quot;^3.15.1&quot;,
      &quot;nuxt&quot;: &quot;^2.15.7&quot;,
      &quot;vue&quot;: &quot;^2.6.14&quot;,
      &quot;vue-chartjs&quot;: &quot;^3.4.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/eslint-parser&quot;: &quot;^7.14.7&quot;,
      &quot;@nuxtjs/eslint-config&quot;: &quot;^6.0.1&quot;,
      &quot;@nuxtjs/eslint-module&quot;: &quot;^3.0.2&quot;,
      &quot;@nuxtjs/tailwindcss&quot;: &quot;^4.2.0&quot;,
      &quot;eslint&quot;: &quot;^7.29.0&quot;,
      &quot;eslint-plugin-nuxt&quot;: &quot;^2.0.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.12.1&quot;,
      &quot;postcss&quot;: &quot;^8.3.5&quot;
    }
  }
  </code></pre>
  <p>I use pretty much use the default in <code>nuxt.config.js</code> except that I added</p>
  <pre class="lang-js prettyprint-override"><code>{ src: '~/plugins/vue-chart.js', mode: 'client' }
  </code></pre>
  <p>to the plugins.</p>