如何用vue实现二级菜单栏

Question

这是我的代码

<div class="menu-parent" v-for = "item in menu" :class="parentColor">

     <p v-text="item.name" class="top-title" @click="toggleShow($index)"></p>

     <ul v-show="menu[$index].child" class="menu-child">

          <li v-for="items in item.child" @click="childCheck($index)" >

                  <a v-text="items.name" :class="shoope"></a>

           </li>

     </ul>

</div>

<script>

import Menu from '../../libs/menu';

export default {

  data () {

    return {

      msg: '登录之后的主页面',

      menu:[],

      shoope:false,

      ishow:false,

      i:-1,

      parentColor:false

    }

  },

  ready(){

      this.menu = Menu.menu;

  },

  methods:{

      toggleShow:function($index){

        $('.menu-parent >ul').eq($index).slideToggle(500);

      },

      childCheck:function($index){

          $('ul li').eq($index).children('a').addClass('childclick');

      }

  }

}

</script>

<style>

.childclick{

    background: #FFFFFF;

    color: #4E8CEE;

}

.parentclick{

    background: #C0CFE0;

    color: #6684B5;

}

</style>

设计图是这样的

求各位大神指教