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.4/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
</div>

<template id="root">
  <div>
    Articles:
    <div v-for="n in $store.state.articles">
      <router-link :to="`/article/${n.id}`">{{ n.title }}</router-link>
    </div>
  </div>
</template>

<template id="article">
  <div>
    <router-link to="/">/root</router-link>
    <h3>{{ article.title }}</h3>
    <div>{{ article.text }}</div>
    <router-link v-if="prev" :to="`/article/${prev.id}`">prev</router-link>
    <span v-else>prev</span>
    <router-link v-if="next" :to="`/article/${next.id}`">next</router-link>
    <span v-else>next</span>
  </div>
</template>

JavaScript

const store = new Vuex.Store({
  state: {
    articles: [...'abcdefghij'].map((n, i) => ({
      id: i + 1,
      title: n.repeat(3).toUpperCase(),
      text: Array(5 + Math.random() * 10 | 0).fill(n.repeat(3)).join(' '),
    })),
  },
});

const Root = {
  template: '#root',
};

const Article = {
  props: [ 'id' ],
  template: '#article',
  computed: {
    ...Vuex.mapState([ 'articles' ]),
    article() {
      return this.articles[this.self];
    },
    self() {
      return this.articles.findIndex(n => n.id === +this.id);
    },
    prev() {
      return this.articles[this.self - 1];
    },
    next() {
      return this.articles[this.self + 1];
    },
  },
};

const router = new VueRouter({
  routes: [
    { path: '/', component: Root },
    { path: '/article/:id', component: Article, props: true },
  ], 
})

new Vue({
  store,
  router,
  el: '#app',
});