Как перенести сообщение, которое кликнуло, в другой блок, используя шину событий

Question

Скажите, пожалуйста, как перенести заголовок и идентификатор сообщения, которое я щелкаю, в другой блок и отобразить его там с помощью шины событий. У меня много постов в одном компоненте Pagination, а не в другой истории. И когда я нажимаю на сообщение в компоненте Pagination, оно автоматически появляется в компоненте History. Нумерация страниц и история являются дочерними компонентами. Я хочу использовать шину событий. Я буду очень благодарен за помощь.

Проект на GitHub

Код компонента History:

<template>
  <ul>
    <li v-for="(post, index) in historyPosts" class="post" :key="index">
        <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
        <img src="src/assets/nature.jpg">
        <p class="boldText"> {{ post.title }}</p>
        </router-link>
      <p> {{ post.body }}</p>
    </li>
  </ul>
</template>

<script>
  import {eventEmitter} from './main'

  export default{
    data(){
      return{
        historyPosts: []
      }
    },
      created(){
        eventEmitter.$on('historyPost', (hPost) => {
          historyPosts: hPost
        })
    }
  }
</script>

<style>

</style>

Код компонента с постами:

<template>
  <div class = "app">
    <ul>
      <li v-for="(post, index) in paginatedData" class="post" :key="index">
        <div @click="postInHistory">
          <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
          <img src="src/assets/nature.jpg">
          <p class="boldText"> {{ post.title }}</p>
          </router-link>
        <p> {{ post.body }}</p>
        </div>
      </li>
      </ul>
        <div class="allpagination">
          <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
          <div class="pagin">
            <button class="item"
            v-for="n in evenPosts"
            :key="n.id"
            v-bind:class="{'selected': current === n.id}"
            @click="page=n-1">{{ n }} </button>
          </div>
          <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
        </div>
      </div>
    </template>

    <script>
      import axios from 'axios';
      import {eventEmitter} from './main'
      export default {
        name: 'app',
        data () {
          return {
            current: null,
            page: 0,
            visiblePostID: '',
            pSearch: '',
            posts: []
          }
        },
        computed: {
          evenPosts: function(posts){
            return Math.ceil(this.posts.length/6);
          },

          paginatedData() {
            const start = this.page * 6;
            const end = start + 6;
            return this.filteredPosts.slice(start, end);
          },
          filteredPosts() {
            return this.posts.filter((post) => {
              return post.title.match(this.pSearch);
            });
          },
        },
        methods: {
          getData() {
            axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
              this.posts = response.data
            })
          },
          postInHistory(){
            const hPost = {
            title: this.post.title,
            body: this.post.body
          }
            eventEmitter.$emit('historyPost', hPost)
          },
        },
        created(){
          eventEmitter.$on('messageSave', (string) => {
            this.pSearch = string
          }),
          eventEmitter.$on('postAdd', (post) => {
            axios.post('http://jsonplaceholder.typicode.com/posts/', {
              title: post.title,
              body: post.body
            }).then((response) => {
              this.posts.unshift(response.data)
            })
          }),
          this.getData()
        }
      }
    </script>