How to implement dialogs?

Question

Vue.js

I have a list of conversations and messages in them.
I made a list of all these conversations, but now I need to display all the messages and the necessary information when clicking on the conversation. How to implement it?
At the moment, I have made a chat component and store all the necessary data in the conversation object.
And yet - when moving from one conversation to another, the avatars of people do not change immediately (that is, elements are updated there, not replaced). Is there any way I can force Vue to replace all content?

Answer 1

you need to display all the messages and the necessary information when you click on the conversation

Make a property - an active conversation, when you click on a conversation, write it to this property. Its (property) and deduce.
For the element whose content is to be replaced, give it a key that depends on the selected conversation. Something unique, id for example.