JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js"></script>
<div class="app">
  {{ message }}
  <line-chart :chart-data="datacollection"></line-chart>
  <button @click="fillData()">Randomize</button>
</div>

JavaScript

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mixins: [VueChartJs.mixins.reactiveProp],
  props: ['options'],
  mounted() {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, this.options)
  }
})

var vm = new Vue({
  el: '.app',
  data: function() {
    return {
      message: 'Hello World',
      datacollection: null
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
    fillData: function() {
      this.datacollection = {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [{
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [this.getRandomInt(), this.getRandomInt()]
        }, {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [this.getRandomInt(), this.getRandomInt()]
        }]
      }
      console.log(this.datacollection)
    },
    getRandomInt: function() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  },
  created: function() {
    console.log(VueChartJs)
  }
})