Why Vue .sync command not working in router view?

I’m trying to sync a variable between components using the .sync command in Vue. It works without problems when I put components in the page using the tag (for example: <my-component></my-component>). When I bind it in a <router-view>, it works only one-way. Is it normal?

When I click on the link inside the component, it does not change the value of test in the root Vue object. When I change it in the root object, the component inherits the value correctly.

Click here for an example


You are trying to update the prop directly, the correcto way to update it is to emit an update. Remember :test.sync is a shorthand to v-bind:test and v-on:update:test

On your Foo component:

editTest: function() {     
  this.$emit('update:test', false)  // instead of this.test = false;        

Fiddle: https://jsfiddle.net/hansfelix50/u7k5qpwz/