JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<div id="app"></div>
JavaScript
Vue.component('my-component', {
props: {
value: Number
},
watch: {
value(val) {
this.$emit('change', val)
}
},
template: `
<p>{{ value }}</p>
`
});
var App = Vue.extend();
new App({
el: '#app',
data() {
return {
value: 0
}
},
methods: {
handleChange() {
alert('changed')
}
},
created() {
this.value = 1
},
template: `
<div>
<my-component @change="handleChange" v-model="value"><my-component>
</div>
`
})