how to pass data between different template - vue.js

Question

I'm trying to make a chat and I do not know how to click an item in one template
get the data and transfer it to another.
from #template1 to #template2
const app = new Vue({
el: '#content',
data:{
users: [],
messages: []
}
});
template1
<template lang="html">
<li v-on:click="getMessages()">
<div class="content-container">
<span class="name">{{ user.first_name}} {{user.last_name}}</span>
<span class="txt"></span>
</div>
</li>
</template>
<script>
export default {
props: ['user'],
data: function() {
return {
messages: []
};
},
methods: {
getMessages(id) {
this.$http.get('/admin/chat/messages').then(function(res){
this.messages = res.data;
}
},
}
}
</script>
template2
<template lang="html">
<ul class="chat">
<chat-message v-for="message in messages" :key="+message" :message="message"></chat-message>
</ul>
</template>
<script>
export default {
props: ['messages']
}
</script>
how to pass data between this template
The structure is:
el: #content
<div id="content">
<div class="list-text" id="chatbox">
<user-list :users="users">#template1</user-list>
</div>
<div class="list-chat">
<chat-log :messages="messages">#template2</chat-log>
<chat-composer v-on:messagesent="addMessage"></chat-composer>
</div>
</div>
When I click on the user in the user-list
i'm trying to load messages from this user
and I do not know how to pass them in chat-log

Answer 1

There are a few ways to achieve the communication between the components
Emit and listen to event (if the component are siblings, you will have to go through the parent) - this solution is fine if you have very little components that need to communicate with each other
Use event bus -> every event will go through this bus (good tutorial on how to create an event bus)
Use vuex - state management (just like event bus, but better, if you have a lot of component communication)