vue 淡入淡出组件

Question

vue.js中在不使用jQuery的情况下，如何实现淡入淡出的组件（用于显示http请求成功或者失败的消息提示）？
目前使用的是vue的transition动画，组件显示消失根据watch vuex中某个值的变化来实现，但是目前存在一个问题就是vuex中的值变化了，有时不会执行watch中的方法，导致组件保持始终显示的状态

<transition name="slide-fade">
    <div class="info-log" v-if="alertInfo.show">
      <img src="../assets/success-icon.png" alt="success-icon" v-if="alertInfo.success">
      <img src="../assets/error-icon.png" alt="success-icon" v-else>
      <span class="info-text">{{alertInfo.alertText}}</span>
    </div>
  </transition>

watch: {
      // 监听搜索按钮是否被点击
      'alertInfo.show': {
        deep: true,
        handler (curVal, oldVal) {
          let self = this
          setTimeout(function () {
            self._ChangeAlertInfo({
              'show': false
            })
          }, 1300)
        }
      }
    }