<template>
  <ul>
    <li v-for="menu in menus">
      <h2 @click="go(menu.name)">{{menu.title}}</h2>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['menus'],
  data () {
    return {
      currentName: '',
    }
  },
  watch: {
    '$route' () {
      this.checkRoute()
    },
  },
  methods: {
    go (name) {
      this.$router.push({ path: `/${name}/` })
    },
    checkRoute () {
      this.currentName = this.$route.name
    },
  },
  mounted () {
    this.checkRoute()
  },
}
</script>
