Vue.js not updating props in child when parent component is changing the property

Question

I am trying to communicating between component I have structure like

<div id=chat-box>
<div class="wrapper">
  <div>
    <chat-header></chat-header>
    <message-container :chat="chat"></message-container>
    <chat-compose @clicked="onClickChild"></chat-compose>
  </div>
</div>

parent

methods: {
onClickChild (value) {
  console.log('in top parent');
  this.chat = value;
},

child 1

methods: {
  startChat: function(event) {
    this.$emit('clicked', new chat({
     type: 'user',
     message: this.input_value,
     button: 'user',
     metaInfo: 'user',
     isBot: false,
   }))
  },
},

child 2

export default { name: 'messageContainer', props: ['chat'],

data: function() {
  return {
    chatSession: [],
  }
},

method : {
  updateData : function() {
    console.log('called updatedata');

  }
},

created: function () {
  console.log(this.chat) 
},
mounted: function () {
 console.log(this.chat) 
},

updated: function() {
  console.log(this.chat)
}

}

Here on clickChild method is emitting the parent method which is updating the chat object but message-container component not getting the updated value it is showing default initialized value even not rendering again on data changes I tried created, mounted and updated method also to get the updated value these method are calling only once at the time of app initialization never calling again on data changes

Basically here are three component one is parent and other two are child so one child is updating the chat object and emitting to parent and parent passing same updated child to another child but the another child not getting re-render or getting the updated value so please help am I doing wrong or there are other way to achieve it.

Answer 1

This is probably due to Vue caching the <message-container> component.

Try adding a :key the component to force it to re-render.

 <message-container :chat="chat" :key="count"></message-container>

Add a counter to your onClickChild method

onClickChild(value){
   this.chat = value;
   this.count = this.count + 1;
}

Answer 2

You added an event called "clicked". You should use "click" instead.

<chat-compose @click="onClickChild"></chat-compose>

If you want to create "clicked" event, you need to specify this inside your chat-compose component.

Basically, you will receive a custom component event and emit a response/something.

For custom components events:

https://v2.vuejs.org/v2/guide/components.html#Custom-Events https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

---

If you want to send a message to the parent, you can use:

this.$parent.chat = ...

or

Create a global event bus, to keep all events in one place (depending on the size/complexity of your application, this can be a good solution). You can read about it here: https://alligator.io/vuejs/global-event-bus/