等待元素加载然后渲染数据（vue.JS）

Question

I am trying to put the v-show condition so that once the data is returned the graph is rendered and the data is filled in, but the graph is blank after the data is returned

my JS

   methods: {
      refresh(){
         this.loading = true
         this.graf = false 

         this.$axios.get("/Op/Search")
         .then(res => { 
            this.loading = false;
            this.graf = true;    
            this.op = res.data 
            
            this.$refs.chartTypes.updateSeries([{
                name: 'TYPES',
                data: [this.op.cars, this.op.lines, this.op.cors]
             }])
         })
      }
   }
   data() {
      return {
         loading: true,
         graf: false,
      }
   }

my html

       <div class="col-7">
          <center v-show="loading" style="margin-top: 90px;"> <loading/> </center>
          <div v-show="graf">
              CARS
          </div>
          <div v-show="graf">
             <apexchart 
                ref="chartTypes"
                style="background: transparent;margin-left: -8px;"
                type="bar"  
                height="300" 
                :options="chartype" 
                :series="seriestypes"
                ></apexchart>
             </div>
       </div>

I think the data process faster than the rendering, how would you do once the request to the backend was processed, he would wait for the rendering component and then proceed to assemble the data?

Answer 1

Should actually work like this:

<template>
   <div v-show="show">Test</div>
</template>

  .
  . 
  .
  methods: {
     makeCall(){
        this.$http.get('foo')
          .then(response => {
             this.show = true;
         });
     }
  },
  data: {
    show: false
  }
});