Vue Диаграмма. js - Невозможно использовать возвращаемые данные для набора данных диаграммы.

Question

Я понятия не имею, почему я не могу использовать свои возвращаемые данные, такие как this.point0, this.point1 в разделе async mounted(), все значения остаются равными 0, когда я их вызываю. immediate:true не работает, сначала не работает вычисление набора данных.

Я пытаюсь создавать адаптивные временные ряды, которые меняют значение при нажатии другой кнопки, все работает нормально, значение обновляется плавно, за исключением того, что я могу использовать эти значения на графике. Вы можете попробовать мой код здесь: https://jsfiddle.net/1eahf26q/

Интересный комментарий от @Saksham спросил: «Почему вы хотите инициализировать линейный график в mount (). Это можно сделать всякий раз, когда Вы готовы с данными "Я не совсем уверен, что он имеет в виду. Извините за этот вопрос, мой первый раз в Vue и 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

Я не очень понимаю шаблоны в вашем коде, например, где this.promise инициализирован.

Почему бы вам не попробовать что-то, что немного легче понять.

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

Тогда в смонтированном

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