Vue.js transitionのbefore-leaveでDOMの変更が反映されない

Vue.js transitionアニメーションで、アニメーションと同時に内部のテキストを変更しようとしたのですがうまく反映されません。
以下その再現ソース。

new Vue({
  el:'#app',
  data:{
    show:false,
    status:'',
  },
  methods:{
    beforeEnter(el){
      this.status = 'beforeEnter'
    },
    afterEnter(el){
      this.status = 'afterEnter'
    },
    beforeLeave(el){
      this.status = 'beforeLeave'
    },
    afterLeave(el){
      this.status = 'afterLeave'
    },
  },
})

.v-enter{
  opacity:0;
}
.v-enter-to{
  opacity:1;
}
.v-enter-active,
.v-leave-active{
  transition:opacity 0.5s;
}
.v-leave{
  opacity:1;
}
.v-leave-to{
  opacity:0.5;
}
span.title{
  display:inline-block;
  width:200px;
}
span.status{
  border:solid 1px #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="show = !show">toggle</button>
  <div>
    <span class="title">1.transitionなし</span>
    <span class="status">{{status}}</span>
  </div>
  <div>
    <span class="title">2.transitionあり v-show</span>
    <transition
      @before-enter="beforeEnter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @after-leave="afterLeave"
    >
      <span v-show="show" class="status">{{status}}</span>
    </transition>
  </div>
  <div>
    <span class="title">3.transitionあり v-if</span>
    <transition>
      <span v-if="show" class="status">{{status}}</span>
    </transition>
  </div>
</div>

ボタンを押すと表示非表示が切り替わるようになっています。
beforeEnter、afterEnter、beforeLeave、afterLeave、それぞれイベントとして登録していて、発生するたびにstatusに代入しています。
(一応transitionが発生しているのを視覚的に確認するために透明度のアニメーションもさせています。)

1、2、3、それぞれstatusを表示しています。

1. そのまま表示
2. transitionでv-showで切り替え
3. transitionでv-ifで切り替え

どれも普通に動きそうですが、動作させてみると3だけがbeforeLeave、afterLeaveの変更が反映されないことがわかると思います。
v-showでは動くのになんでv-ifでは動作しないのでしょうか？
v-ifで反映させる方法はありますか？