Vue v-html动态渲染界面效果

Question

v-html绑定一个变量var1,var1通过五个同步请求，依次更新var1，可是界面效果是，卡主等第五次赋值var1后，界面一次性刷新。
希望的效果是每一次赋值var1，界面动态效果更新。

请问，如何这是为什么，那么如何实现想要的效果呢？
各位大佬，用js地狱回调实现想要的效果了。现在换成promise，怎么都出不来，贴出代码，大佬们帮忙看看怎么改：
`

//es6 promise解决地狱回调写法
    let re = await check(apis[0].title, apis[0].url);
    //希望这里马上渲染div
    mydiv2_var.htmlStrVue += re;
   //等3秒希望看到动态更新div dom，可是没效果
    await setTimeout(function () {
    }, 3000);

    re = await check(apis[1].title, apis[1].url);
    mydiv2_var.htmlStrVue += re;

    await setTimeout(function () {
    }, 3000);
    re = await check(apis[2].title, apis[2].url);
    mydiv2_var.htmlStrVue += re;

    await setTimeout(function () {
    }, 3000);
    re = await check(apis[3].title, apis[3].url);
    mydiv2_var.htmlStrVue += re;

    await setTimeout(function () {
    }, 3000);
    re = await check(apis[4].title, apis[4].url);
    mydiv2_var.htmlStrVue += re;

`

Answer 1

<template>
  <!-- 首页 -->
     <div class="statistics-box">
        {{a}}
    <el-button @click="btn">我来+1</el-button>
  </div>
</template>

<script>
  export default {
data() {
  return {
    a: 0
  }
},
methods: {
  add(time) {
    return new Promise(reject => {
      setTimeout(() => {
        this.a++
        reject()
      },time)
    })
  },
  async btn() {
    await this.add(2000)
    await this.add(1000)
    await this.add(2000)
    await this.add(1000)
    await this.add(2000)
    await this.add(1000)
  }
   }
  }
</script>

Answer 2

这要看你是第一次变更效果完成后再赋值第二次还是五次变更依次赋值了。

Answer 3

问题已解决：总结一下
看提问中的代码，settimeout放错位置了，应该像@前端小黄 演示的那也，放到返回promise的地方。
话说，settimeout放的这两个位置导致的现象，差别挺大的，原理还不是很理解。。。。