Vue Chart.js - Can't use the return data for chart data set

Question

I have no idea why I can't use my return data like this.point0, this.point1 in the async mounted() section, all the value remain 0 when I call them. immediate:true is not work, compute dataset first is not work.

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: https://jsfiddle.net/1eahf26q/

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.

  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
          },
        ]
      }

Answer 1

I don't really understand the patterns in your code, like where this.promise is initialised.

Why don't you try something that's a bit easier to understand.

methods: {
    async getApiChartData() {
        let responseData = (await axios.get(api_url)).data.data;
        return [responseData[0], responseData[1], responseData[2]];
    }
}

Then in mounted

async mounted() {
    let datapresent = await this.getApiChartData();
    //rest of your code
}