Prop not getting updated in child component on value change - vuejs2

Question

In my App component (parent) I have:
<div class="bg-dark text-white text-center p-3 content">
<div class="form-group">
<input class="form-control" v-model="dogBreed" />
</div>
<my-child-comp greeting="Hello from parent" v-bind:dog-breed="dogBreed" />
</div>
...
data() {
return {
dogBreed: "Pit Bull"
}
},
And in the child view:
<template>
<div class="bg-primary text-white text-center m-2 p-3 content">
<h3>Dog: {{ dog }}</h3>
</div>
</template>
...
props: ["greeting", "dogBreed"],
data() {
return {
dog: this.dogBreed,
}
},
I do get the initial value for dogBreed from the parent component inside of the child component, but when I change the value of the input field the same change is not reflected, why?

Answer 1

The prop in the parent component is not named properly, it should be the exact name of the props which is dogBreed you used in the child
component
<div class="bg-dark text-white text-center p-3 content">
<div class="form-group">
<input class="form-control" v-model="dogBreed" />
</div>
<my-child-comp greeting="Hello from parent" v-bind:dogBreed="dogBreed" />
</div>
...
data() {
return {
dogBreed: "Pit Bull"
}
},
Your child component can remain the same but use computed instead of data. Having the same name will not cause any computational
problems and using computed instead of data should fix up the dynamic
nature of your code.
<template>
<div class="bg-primary text-white text-center m-2 p-3 content">
<h3>Dog: {{ dog }}</h3>
</div>
</template>
...
props: ["greeting", "dogBreed"],
computed: {
dog(){
return this.dogBreed
}
},
If however you are keen on using dog-breed then you must rename the prop in you child component to dog-breed before binding it in your parent component.