在vue中setTimeout 失效

在實例中設置了方法，在方法中主要實現(xiàn)的效果是

在上面有三個路由，點擊一個路由，先展示Loading...字樣，三秒鐘后會顯示想用組件內(nèi)容，但是在設置方法中設置了setTimeout方法，但是并沒有起到作用，沒有先展示loading字樣，而是直接展示了子組件的內(nèi)容，代碼如下

<template>
<div>
<div>
<router-link to="/shuju/one">/shuju/one</router-link>
<router-link to="/shuju/two">/shuju/two</router-link>
<router-link to="/shuju/three">/shuju/three</router-link>
</div>
<div v-if="loading">Loading...</div>
<div v-if="post">
<router-view :page="post">
</router-view>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import After from './after.vue'
Vue.use(VueRouter)
const router=new VueRouter({
    routes:[
       {
       path:'/shuju/:id',
        name:'shuju',
        component:After,
        props:true
   }
    ]
})

export default{
    name:'daohangafter',
    data(){
    return{
      loading:false,
      post:null
    }
    },
    router,
    watch:{
    '$route':'fetchData'
    },
    methods:{
      fetchData(){
         let vm=this;
         this.post=null;
         this.loading=true;
      setTimeout(getPost(vm.$route.params.id),3000)
      function getPost(id){
         console.log(id);
          vm.loading=false;
           if(id=='one'){
                vm.post={title:'one',body:'這是one'}
           }else if(id=='two'){
                 vm.post={title:'two',body:'這是two'}
           }else{
               vm.post={title:'three',body:'這是three'}
           }
         }
      }

    }
}
</script>

子組件代碼為

<template>
<div>
<h3>{{page.title}}</h3><p>{{page.body}}</p>
</div>
</template>
<script>
export default{
    name:"after",
    props:{page:Object}
}
</script>

請問如何才能實現(xiàn)三秒后再顯示呢？setTimeout如何實現(xiàn)？