Undestanding Custom Component and V-Model in VueJS - vue.js

Question

NOTE: I have made a video version of this quesiton, which you can view here:
https://www.loom.com/share/6a23d0791c2444068e964b388ed5497e
The VueJS documentation dicusses how to use v-model with components: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
If I create a component exactly has written in the documentation, it works just fine. Here is the code:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
But now let me try and change the name of the prop in that component -- for example, to bar:
Vue.component('custom-input', {
props: ['bar'],
template: `
<input
v-bind:value="bar"
v-on:input="$emit('input', $event.target.value)"
>
`
})
Now it only half-works. That is to say, let's say I am binding custom-input to a data property called message, like this: <custom-input v-model="message"></custom-input>. If I dynamically update the value of message, then the value of custom-input will update -- but only once. If I update the value again it will not update the value of custom-input.
However, if I change the prop name back to value (instead of bar), then the value of custom-input will update each and every time I udpate the value of message.
[again, here is the video description of what I am talking about: https://www.loom.com/share/6a23d0791c2444068e964b388ed5497e]
Why is that? Why should it matter what name I give the prop? Does it have to be named value because I am binding to the value attribute? If so, why?
In short, what is going on here?
Thanks.

Answer 1

Yes, the attribute must be named value because you are using v-model to bind. v-model is an abbrevistion of binding the attribute value and listening to the event input. It's a special use case for binding a value two ways.
So, this is exactly the same:
<custom-input v-model="user" />
And:
<custom-input :value="user" #input="user = $event" />
If you prefer the full attribute notation:
<custom-input v-bind:value="user" v-on:input="user = $event" />
With the variable $event, you can, directly in the template, access the emitted value. You can also write a function name without brackets into the template to pass the emitted value as first parameter (e.g. #input="setUser", then declare a method setUser(user)).

Answer 2

props is used to get data down from a parent component to a child component
$emit is used to send back data from the child to the parent
v-model is used for 2 way data binding
always make the data reactive with a return data(){return{...}}
props example:
Vue.component('product',{
template:`
<div>
<item :items="items"/>
</div>
`,
data() {
return{
items:'hi'
}
}
})
Vue.component('item',{
template:`
<div>
{{items}}
</div>
`,
props:{
items:{
type:String,
required:false
}
}
})
var app= new Vue({
el:"#app"
})
//in html file
<div id="app">
<product/>
</div>