title: Vue Chart.js - Can't use the return data for chart data set
body: <p>I have no idea why I can't use my return data like <code>this.point0, this.point1</code> in the <code>async mounted()</code> section, all the value remain 0 when I call them. <code>immediate:true</code> is not work, compute dataset first is not work.</p>
  
  <p>I'm trying to do responsive time series that change the value when I press the different button, everything works fine, the value is updated smoothly, except that I can use these value in the chart.
  You can try out my code here: <a href="https://jsfiddle.net/1eahf26q/" rel="nofollow noreferrer">https://jsfiddle.net/1eahf26q/</a></p>
  
  <p>An interesting comment from @Saksham asked "Why do you want to initialize the line chart in mounted(). It can be done whenever you are ready with the data" I'm not quite sure what he means. Sorry for this kind of question, my first time into Vue and javascript.</p>
  
  <pre><code>  extends: Line,
    props: ["height","breedKey", "time"],
  
    computed: {
      topic() {
        return this.breedKey;
      }
    },
  
    data() {
      return {
        point0: [],
        point1: [],
        point2: [],
      };
    },
  
    watch: {
     async breedKey (newVal, oldVal)  {
         try {
  
        this.promise = axios.get(api_url);
        const res = await this.promise;
  
        this.point0 = res.data.data[0].Freq;
        this.point1 = res.data.data[1].Freq;
        this.point2 = res.data.data[2].Freq;
      } 
     }
    },
  
    async mounted() {
      await this.promise;
      const datapresent = [];
  
      let p0 = this.point0;
      let p1 = this.point1;
      let p2 = this.point2;
  
      datapresent.push(p0, p1, p2);
  
      this.renderChart(
        {
          labels: ['First','Second', "Third"],
          datasets: [
            {
              label: "28 FEB",
              data:  datapresent
            },
          ]
        }
  </code></pre>