vue-router 2.7 beforeRouteUpdate bug

HTML

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

<div id="app">
  Click around and notice how Child stays 0.

  <router-view></router-view>
  <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 :key="$route.path"></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) {
		this.x++;
		next();
	},
}

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

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

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