Showing sub items only when parent item is clicked in vuejs

new Vue({
  el: "#demo",
  data() {
    return {
      navLinks: [
          {text: 'Contact', path: '/contact', sublinks: [{ text: 'Email', path: '/email',},],
          },
          {text: 'About', path: '/about',},
        ],
      belowLinks: [
        {text: 'Blog', path: '/blog',},
        {text: 'Portfolio', path: '/portfolio',},
      ],
      show: null,
      active: null
    }
  },
  methods: {
    toggleNav(i) {
      this.active = null
      this.show === i ? this.show = null : this.show = i
    },
    setActive(i) {
      this.active === i ? this.active = null : this.active = i
    }
  }
})

nav {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #040521;
  justify-content: space-between;
}
ul {
  display: flex;
  align-items: center;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  flex-direction: column;
}
a {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: white;
}
a:hover {
  color: white;
}
li {
  list-style-type: none;
  padding: 10px 0px;
  width: 100%;
}
.page-link .active,
.router-link-active {
  background-color: green;
  color: white !important;
  border-color: inherit !important;
}
.sub-active {
  background-color: yellow !important;
  color: white !important;
  border-color: inherit !important;
}
.items {
  padding: 10px 20px;
}
.sub-items {
  padding: 10px 0px 10px 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
    <nav>
      <ul>
        <li v-for="(link, index) in navLinks" :key="index" >
          <a :to="link.path" class-active="active" @click="toggleNav(index)">
            <span class="items">
              {{ link.text }}
            </span>
          </a>
          <ul v-if="link.sublinks && link.sublinks.length > 0 && show === index"> 
            <li v-for="(link, idx) in belowLinks" :key="idx" @click="setActive(idx)">
              <a :to="link.path" :class="active === idx ? 'sub-active' : ''" > 
                <span class="sub-items">
                  {{ link.text }}
                </span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>