Vue wait for API call before loading data

Question

So I have a this vue component where I'm using highcharts and I have an axios API call that populates the testresults array.I want the chartoptions variable to wait for the api call this is my code so far

<template>
  <div>
<highchart :options="chartOptions" />
<div>{{testresults}}</div>
  </div>
</template>

<script>
import axios from "axios"

export default {
  data() {
    return {
      testresults: [],
      loadAPI: false,
      chartOptions: {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie'
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        title: {
          text: 'Visual Test results'
        },
        xAxis: {
          categories: ['passed', 'failed', 'skipped']
        },


        series: [{
          name: 'Results',
          colorByPoint: true,
          data: [{
            name: 'passed',
            y: this.testresults.pass,
            sliced: true,
            selected: true
          }]
        }]
      }

    }
  },
  async mounted() {
    try {
      const res = await axios.get(`http://localhost:3002/backend/getresults`);


      this.testresults = res.data.data[0];
      console.log(testresults)
    } catch (error) {
      console.log(error);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

I m getting an error that it cannot read properties of undefined pass

Answer 1

Thanks to @Lissy93 I figured out that I could use finally after my api call where I would update chartOptions for anyone wondering this is what worked for me

<template>
  <div>
<highchart :options="chartOptions" />
<div>{{testresults}}</div>
  </div>
</template>

<script>
import axios from "axios"

  export default {
    data(){
      return{
        testresults:[],
        loadAPI:false,
        chartOptions:{}

    }
  },
          async mounted() {
      try {
      const res = await axios.get(`http://localhost:3002/backend/getresults`);
      
      
      this.testresults=res.data.data[0];
      console.log(testresults)
      }catch (error){
        console.log(error);
      }finally{
                this.chartOptions={
            chart: {
                   plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
            },
              tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
            title: {
                text: 'Visual Test results'
            },
            xAxis: {
                categories: ['passed','failed','skipped']
            },
         
            
               series: [{
    name: 'Results',
    colorByPoint: true,
    data: [{      name: 'passed',
      y: this.testresults.pass,
      sliced: true,
      selected: true}]
        }]
      }
      }
    },
    computed:{
      
    }
  }
</script>

<style lang="scss" scoped>

</style>