Vue实现递归menu

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
    #app{
        width: 300px;
        overflow: hidden;
    }
    .item{
         margin-left: 30px;
         /* padding-left: 30px; */
         width: 100%;
         
            
    }
    .name {
        background-color: pink;
        border-bottom: 1px solid #333;
        cursor:pointer;
    }
     .name:hover{
         background-color: orange;
     }
    </style>
</head>

<body>
    <div id="app">
          <list :menus="menus"></list>
    </div>
    <template id="list">
        <div>
            <div v-for="(item,index) in menus" :key="index" class="item">
                <div class="name">{{item.name}}</div>
                <child v-if="item.children" :child="item.children"></child>
            </div>
        </div>
    </template>
    <template id="child">
        <div>
            <list :menus="child"></list>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
    Vue.component("list", {
        props: ['menus'],
        template: "#list",
    })
    Vue.component("child", {
        props: ['child'],
        template: "#child",
    })
    var vm = new Vue({
        el: "#app",

        data: {
            menus: [{
                name: "经济",
                children: [{
                    name: "如家",
                    children: [{
                        name: "上江路-如家"
                    }, {
                        name: "望江路-如家"
                    }]
                }, {
                    name: "7天",
                    children: [{
                        name: "长江路-7天"
                    }, {
                        name: "望江路-7天"
                    }]
                }]
            }]
        },
        mounted: function() {

        },
        method: {

        }
    })
    </script>
</body>

</html>