vue组件异步更新疑问

Question

参考mint-UI中的toast组件改了loading组件，方便可以直接通过load(state)调用，实现axios拦截请求自动加载loading。发现在组件实例方法里修改state状态，发现很奇怪的问题，见下方描述。

先上代码：
loading.vue

<template>
   <div>
      <div class="sk-fading-circle" v-show="state">
          <div class="">
          <div class="sk-circle1 sk-circle"></div>
          <div class="sk-circle2 sk-circle"></div>
          <div class="sk-circle3 sk-circle"></div>
          <div class="sk-circle4 sk-circle"></div>
          <div class="sk-circle5 sk-circle"></div>
          <div class="sk-circle6 sk-circle"></div>
          <div class="sk-circle7 sk-circle"></div>
          <div class="sk-circle8 sk-circle"></div>
          <div class="sk-circle9 sk-circle"></div>
          <div class="sk-circle10 sk-circle"></div>
          <div class="sk-circle11 sk-circle"></div>
          <div class="sk-circle12 sk-circle"></div>
          </div>
      <span class="loading-txt">加载中...</span>
    </div>
    <div class="v-modal" v-show="state"></div>
 </div>       
</template>
<script>
export default {
  name: 'loading',
  data(){
    return {
      state: false
    }
  },
  watch: {
    'state': function(){
      console.log(Date.now() + '--watch--' + this.state)
    }
  }
}
</script>

loading.js

/**
 * example
 * import Loading from '../../components/loading/index.js'
 * Loadding(state) 
 * @params {booloean}    是否显示loading动画
 */


import Vue from 'vue'

const LoadingConstructor = Vue.extend(require('./loading.vue'))

let loadingPool = []

let returnAnInstance = instance => {
    if (instance) {
        loadingPool.push(instance)
    }
}

LoadingConstructor.prototype.load = function(flag) {
    this.state = flag
    console.log(Date.now() + '--load--' + this.state)
    !this.state && this.$el.parentNode.removeChild(this.$el)
    returnAnInstance(this)
}

let getAnInstance = () => {
    if (loadingPool.length > 0) {
        let instance = loadingPool[0];
        loadingPool.splice(0, 1);
        return instance
    }
    return new LoadingConstructor({
        el: document.createElement('div')
    })
}

let Loading = (flag) => {
    let instance = getAnInstance()
    document.body.appendChild(instance.$el)
    instance.$nextTick(function() {
        instance.load(flag)
    })
    return instance
}

export default Loading

这样调用无法生效：
Loading(true)
Loading(false)
log信息:
1492597864195--load--true
221492597864196--load--false
331492597864198--watch--true(这里只监测到一次true,没有监测到false)

这样调用生效：
Loading(true)
setTimeout(()=>{
Loading(false)
},0)
log信息:
1492597998400--load--true
331492597998405--watch--true
1492598001307--load--false
1492598001307--watch--false

为毛异步就可以呢？猜想和vue组件异步更新DOM有关，但是这题症结在哪里，该如何改呢？