在setTimeout中更新的数据，无法立即生效到template中

我在做一个页面时，需要实现一个特殊Loading效果，为便于描述，功能简化为：

1. 初始状态时，设置 waitTimeOut = true，显示 Loading 效果
2. 点击按钮，3秒钟后，设置 waitTimeOut =false，Loading 不显示，并且在 Loading 的位置显示字符串；
   问题：
   我使用 setTimeout 定时器，到3秒钟时，日志跟踪 waitTimeOut 会变成 false，但 Loading 效果不会消失，而不用 setTimeout 是没问题的。
   查了一下vue文档，判断可能是因为 setTimeout 里的操作是放在当前一轮任务的最后面？所以要手动重新渲染？
   因为我不是做前端的，有点蒙逼，所以来求助。

视图部分代码：
<view>
<template v-if="waitTimeOut===true">
<!-- 当waitTimeOut为true时，显示Loading动图，以下为Loading效果 -->
<view class="lds-facebook">
<view></view>
<view></view>
<view></view>
</view>
</template>
<template v-else>
<view>加载完成!</view>
</template>
</view>

<view>
<button @click="testLoading()">loading</button> // 显示Loading
<button @click="testLoaded()">loaded</button> //此处bug，无法实现“ 延时 3秒，Loading消失”
<button @click="testLoadedNoTimeout()">loaded Now</button> // 直接修改
</view>

JS部分代码
// 恢复Loading状态 OK
testLoading: function() {
console.log("loading...");
this.waitTimeOut = true;
console.log("loading: " + this.waitTimeOut);
},

// 延时 3秒，bug
testLoaded: function() {
console.log("test Loading...");
console.log("before setTimeout: " + this.waitTimeOut);

setTimeout(function() {  
    this.waitTimeOut = false;  
    // 最后setTimeout为false  
    console.log("final setTimeout: " + this.waitTimeOut);  
}, 3000);  

console.log("after setTimeout: " + this.waitTimeOut);  

},

// 直接修改，OK
testLoadedNoTimeout: function() {
this.waitTimeOut = false;
console.log("loaded: " + this.waitTimeOut);
},