Sub-menu com VueJS

Estou precisando fazer um sub-menu em uma sidebar usando Vuejs, mas não estou sabendo como fazer, pode me ajudar?

tentei o seguinte código:

<aside ref="leftSidenav" @open="open('Left')" @close="close('Left')">

    <div class="menu">
      <div class="logo">
        <img src="/static/images/logo-vista.png" alt="">
      </div>  
      <slot></slot>
      <ul>
        <router-link v-for="(link, index) in sidebarLinks" key="link.id" :to="link.path" :ref="link.name">
          <li>{{ link.name }}</li>
          <ul class="nav-sub" v-if="sidebarLinks.children">
            <li v-for="child in sidebarLinks.children">{{ child.name }}</li>
          </ul>
        </router-link>
      </ul>
    </div>
  </aside>
</template>

<script>
export default {

  props: {
    sidebarLinks: {
      type: Array,
      default: () => [
        {
          id: 1,
          name: 'Usuários',
          path: '/users',
          children: [{
            name:'Novo usuário',
            path: '/users/novo'
          }]
        },
        {
          id: 2,
          name: 'Serviços',
          path: '/servicos'
        }
      ]
    }
  }
}
</script>