I’m trying to make a vertical multidimencional menu with Vue.js but the subitens aren’t showing up

Question

This is the code I have so far:

Vue.component('menu-item', {
    props: ['cmitens'],
    template: '#menu-item'
});
new Vue({el: '#vuesadminmenu', 
            data: {
             menuitens: {"test0":{"titulo":"Test0","open":"false","selected":"false","link":"http:\/\/www.link.com\/test0","child":""},"test1":{"titulo":"Test1","open":"true","selected":"false","link":"http:\/\/www.link.com\/test1","child":{"test2":{"titulo":"Test2","open":"true","selected":"false","link":"http:\/\/www.link.com\/test2","child":{"test3":{"titulo":"Test3","open":"true","selected":"true","link":"http:\/\/www.link.com\/test3","child":""}}},"test4":{"titulo":"Test4","open":"false","selected":"false","link":"http:\/\/www.link.com\/test4","child":""}}},"test5":{"titulo":"Test5","open":"false","selected":"false","link":"http:\/\/www.link.com\/test5","child":{"test6":{"titulo":"Test6","open":"false","selected":"false","link":"http:\/\/www.link.com\/test6","child":""}}},"test7":{"titulo":"Test7","open":"false","selected":"false","link":"http:\/\/www.link.com\/test7","child":""}}
            }
       });

ol ol, ol ul, ul ol, ul ul { margin-left: 20px; }

<script src="https://appstack.bootlab.io/js/app.js"></script>
    <link href="https://appstack.bootlab.io/css/app.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <div class="wrapper">
    <nav class="sidebar">
        <div class="sidebar-content">
            <ul id="vuesadminmenu" class="sidebar-nav">
            <template id="menu-item">
                <li class="sidebar-item" v-for="(mitem, mkey) in menuitens" v-bind:class="[(mitem.open == 'true') ? 'active' : '']">
                    <a class="sidebar-link" v-bind:href="mitem.child !== '' ? '#'+mkey : mitem.link" :data-toggle="[(mitem.child !== '') ? 'collapse' : '']" v-bind:class="[(mitem.open == 'true') ? '' : 'collapsed']">
                        <span class="align-middle">{{mitem.titulo}} {{mitem.open}}</span>
                    </a>
                    <ul class="sidebar-dropdown list-unstyled collapse" v-if="mitem.child !== ''" v-bind:class="[(mitem.open == 'true') ? 'show' : '']">
                        <menu-item :cmitens="mitem.child"></menu-item>
                    </ul>
                </li>
            </template> 
            </ul>
        </div>
    </nav>
    </div>

The idea is for the menu to look like this:

The Item that has no children should look like this:

<li class="sidebar-item">
    <a class="sidebar-link" href="/test.html">
        <span class="align-middle">Test</span>
    </a>
</li>

When items have children he should have the option data-toggle="Collapse" and be more or less like this:

<li class="sidebar-item">
    <a class="sidebar-link" href="/test.html" data-toggle="collapse" >
        <span class="align-middle">Test</span>
    </a>
    <ul class="sidebar-dropdown list-unstyled collapse">
        ##<li>#### SUB ITENS ####</li>##
    </ul>
</li>

And when you don’t have any more children, you should keep them that way:

<li class="sidebar-item">
    <a class="sidebar-link" href="/test3.html">Test3</a>
</li>

I think I’m getting close to the result, but the subitens are disappearing, it seems that it does not find the data that should continue the loop.

Can someone help me?