Sync in Vue 1.x
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
<div id="app">
<p>
Value in parent: {{value}}
</p>
<custom-component :value.sync="value"></custom-component>
<button v-on:click="value = 'Changed From Parent!'">CHANGE FROM PARENT</button>
</div>
<template id="custom-component">
<div>
<p>
Value in child: {{value}}
</p>
<button v-on:click="value = 'Changed From Child!'">CHANGE FROM CHILD</button>
</div>
</template>
JavaScript
Vue.component('custom-component', {
template: '#custom-component',
props: ['value'],
});
var app = new Vue({
el: '#app',
data: {
value: 'Original Value',
}
});
alert(1)