JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <section>
    <div class="app" v-cloak>
      <h1 v-for="v in consulting.concat(consulting, cop)" v-if="isCurrentSlug(v)">{{v.name}}</h1>
      <ul>
        <li v-for="v in consulting" :class="{ active:isCurrentSlug(v) }"><a :href="v.slug">{{ v.name }}</a></li>
      </ul>
      <hr>
      <ul>
        <li v-for="v in contents" :class="{ active: isCurrentSlug(v) }"><a :href="v.slug">{{ v.name }}</a></li>
      </ul>
      <hr>
      <ul>
        <li v-for="v in cop" :class="{ active: isCurrentSlug(v) }"><a :href="v.slug">{{ v.name }}</a></li>
      </ul>
    </div>
  </section>
</body>
</html>

CSS

[v-cloak] {
  display: none;
}

JavaScript

new Vue({
  el: '.app',
  data() {
  	return {
   		consulting:[
        { slug:'/consulting/aaaa/', name:'狭い土地利用' },
        { slug:'/consulting/bbbb/', name:'丁度よいい土地利用' },
        { slug:'/consulting/cccc/', name:'広いい土地利用' }      
      ],
      contents:[
        { slug:'/contents/', name:'コンテンツについて' },
        { slug:'/contents/mmmmm/', name:'点々' },
        { slug:'/contents/llll/', name:'増やしていきましょう' }
     	],
      cop:[
        { slug:'/cop/design/', name:'デザイン' },
        { slug:'/cop/good/', name:'商品' },
        { slug:'/cop/', name:'コップ' }
     	]
    };
  },
  methods: {
    isCurrentSlug: (val) => {
      return val.slug === location.pathname;
    }
  },
});