vue-router 2.7 beforeRouteUpdate bug

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  Click around and notice how Child is updated after Parent.
  <keep-alive>
  <router-view></router-view>
  </keep-alive>
  <p>
    <router-link to="/app/second/child">Add One</router-link>
  </p>
  <p>
    <router-link to="/app/third/child">And Another</router-link>
  </p>
  <p>
    <router-link to="/app/four/child">And One More</router-link>
  </p>
</div>

<template id="parent-component">
  <div>
    <p>Parent: {{x}}</p>
    <router-view></router-view>
  </div>
</template>

<template id="child-component">
  <p>Child: {{x}}</p>
</template>

Babel + JSX

const Parent = { 
	template: '#parent-component',
  data() {return {x: 0};},
  beforeRouteUpdate(to, from, next) {
  alert('Parent: beforeRou')
		this.x++;
		next();
	},
}

const Child = {
	template: '#child-component',
  data() {return {x: 0};},
  beforeRouteUpdate(to, from, next) {
		setTimeout(() => {
    alert('child: beforeRou')
			this.x++;
			next();
		}, 500);
	},
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: "/app/:id",
      name: "app",
      component: Parent
  }]
})

new Vue({router, el: '#app'});
router.replace("/app/first/child");