JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-chartkick.min.js"></script>

<div id="app">
  <button v-if="!names" @click="getNames">get names</button>
  <button v-if="!data" @click="getData">get data</button>
  <line-chart v-if="chartData" :data="chartData"></line-chart>
  <div v-else>--- пока chartData собрать нельзя, никакого графика не будет ---</div>
  <h3>names</h3>
  <ul v-if="names">
    <li v-for="n in names">{{ n }}</li>
  </ul>
  <div v-else>--- no names ---</div>
  <h3>data</h3>
  <ul v-if="data">
    <li v-for="n in data">{{ n }}</li>
  </ul>
  <div v-else>--- no data ---</div>
</div>

JavaScript

Vue.use(VueChartkick);

new Vue({
  el: '#app',
  data: () => ({
    data: null,
    names: null,
  }),
  computed: {
    chartData() {
      const { names, data } = this;
      return names && data && data.map((n, i) => ({
        name: names[i],
        data: n,
      }));
    },
  },
  methods: {
    getNames() {
      this.names = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
    },
    getData() {
      this.data = Array.from({ length: 3 }, this.createData);
    },
    createData() {
      return [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
      ].reduce((acc, n) => {
        acc[n] = Math.random() * 10e5 | 0;
        return acc;
      }, {});
    },
  },
});