JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<div id="app">
  <router-link to="/posts">posts</router-link>
  <router-link to="/history">history</router-link>
  <router-view></router-view>
</div>

<template id="posts">
  <div class="app">
    <h3>POSTS</h3>
    <ul>
      <li v-for="(post, index) in paginatedData" class="post" :key="index">
        <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }" @click.native="addPostToHistoryComp(post)">
          {{ post.id }}
          <p class="boldText">{{ post.title }}</p>
        </router-link>
        <p>{{ post.body }}</p>
      </li>
    </ul>
  </div>
</template>

<template id="post">
  <div>
    <h3>POST</h3>
    <div>{{ id }}</div>
    <div>{{ title }}</div>
    <div>{{ body }}</div>
  </div>
</template>

<template id="history">
  <div class="history">
    <h3>HISTORY</h3>
    <ul>
      <li v-for="(post, index) in historyPosts" class="post" :key="index">
        {{ post.id }}
        <p class="boldText"> {{ post.title }}</p>
        <p> {{ post.body }}</p>
      </li>
      </ul>
  </div>
</template>

Babel + JSX

const store = new Vuex.Store({
  state: {
    posts: [],
    sSearch: '',
    title: '',
    body: '',
    id: Number,
    historyPosts: []
  },
  actions: {
    loadPosts ({ commit }) {
      axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {
        let posts = response.data
        commit('SET_POSTS', posts)
      }).catch(error => {
        console.log(error);
      })
    },
    transforTitleAndBody({ commit }, payload) {
      const todo = {
        title: payload.sTitle,
        body: payload.sBody,
        id: payload.sId
      }
      axios.post('https://jsonplaceholder.typicode.com/posts', todo).then(_ => {
        commit('ADD_TODO', todo)
      }).catch(function (error) {
        console.log(error);
      })
    },
    transforPostToHistoryComp({ commit }, payload) {
      const todohistory = {
        title: payload.pTitle,
        body: payload.pBody,
        id: payload.pId
      }
      commit('ADD_TODO_HISTORY', todohistory)
    }
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts
    },
    transforSearch(state, payload){
      state.sSearch = payload
    },
    ADD_TODO (state, todoObject) {
      state.posts.unshift(todoObject)
    },
    ADD_TODO_HISTORY (state, todohistoryObject) {
      state.historyPosts.unshift(todohistoryObject)
    },
  },
})

const Posts = {
  template: '#posts',
  name: 'app',
  data () {
    return {
      current: null,
      page: 0,
      visiblePostID: '',
    }
  },
  mounted(){
    this.$store.dispatch({ type: 'loadPosts' })
  },
  computed: {
    posts(){
      return this.$store.state.posts
    },
    search(){
      return this.$store.state.sSearch
    },
    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...