Using v-if loading with async es6 - vue.js

Question

how can we make v-if loading work with an Async typo from Es6 with Vue?
here is the template, and I will put the solution also below, hope it helps.
this helped me so I know everyone learns differently so here is the way I understood things, less theoretical more practical, have a nice day!
<template>
<div class="container-fluid">
<v-col
md="6"
offset-md="3"
v-if="loading"
justify="center">
<v-progress-circular
:size="50"
color="blue"
indeterminate
>
</v-progress-circular>
</v-col>
<div v-else class="row">
<main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 ">
<h2>Learning loading with async</h2>
</div>
</main>
</div>
</div>
</template>
<script>
import Row from '#/components/Row.vue';
const { GoogleSpreadsheet } = require('google-spreadsheet');
const creds = require('#/client_secret.json');
export default {
name: "Sheet",
components: {
Row
},
props: ["sheet"],
data() {
return {
rows: [], // your data things
}
},
methods:{
async accessSpreadSheet() {
const doc = new GoogleSpreadsheet('blahblahblah');
await doc.useServiceAccountAuth(creds);
await doc.loadInfo();
const sheet = doc.sheetsByIndex[0];
const rows = await sheet.getRows({
offset: 1
})
this.rows = rows;
}
},
created() {
this.accessSpreadSheet();
}
}

Answer 1

Example using v-if loading for skeleton loader or whatever, with async data method... I guess in vue
not perfect but i hope it helps out, I will just add the important parts:
<template>
<div class="container-fluid">
<v-col
md="6"
offset-md="3"
v-if="loading"
justify="center">
<v-progress-circular
:size="50"
color="blue"
indeterminate
>
</v-progress-circular>
</v-col>
<div v-else class="row">
<main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 ">
<h2>Learning loading with async</h2>
</div>
</main>
</div>
</div>
</template>
<script>
import Row from '#/components/Row.vue';
const { GoogleSpreadsheet } = require('google-spreadsheet');
const creds = require('#/client_secret.json');
export default {
name: "Sheet",
components: {
Row
},
props: ["sheet"],
data() {
return {
rows: [], // your data things
loading: true, //this is what matters
}
},
methods:{
async accessSpreadSheet() {
const doc = new GoogleSpreadsheet('blahblahblah');
await doc.useServiceAccountAuth(creds);
await doc.loadInfo();
const sheet = doc.sheetsByIndex[0];
const rows = await sheet.getRows({
offset: 1
})
this.rows = rows;
this.loading = false; //this is what works
}
},
created() {
this.accessSpreadSheet();
}
}