Vue.js v-model vs. v-bind.sync

model_vs_sync.md

Vue.js: v-model vs. v-bind:<propname>.sync

These examples use the expression foo as the data source in the parent.

	Prop name	Event name
v-model="foo"	value by default	input by default
v-bind:<propname>.sync="foo"	arbitrary	update:<propname>

v-model

<comp v-model="foo"></comp>
               ⇕
<comp :value="foo" @input="v => foo = v"></comp>

this.$emit('input', new_value)

v-bind.sync

<comp :bar.sync="foo"></comp>
               ⇕
<comp :bar="foo" @update:bar="v => foo = v"></comp>

this.$emit('update:bar', new_value)