在vue中setTimeout 失效

Question

在实例中设置了方法，在方法中主要实现的效果是

在上面有三个路由，点击一个路由，先展示Loading...字样，三秒钟后会显示想用组件内容，但是在设置方法中设置了setTimeout方法，但是并没有起到作用，没有先展示loading字样，而是直接展示了子组件的内容，代码如下

<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>

请问如何才能实现三秒后再显示呢？setTimeout如何实现？