vue3.0+elementplus 动态添加menu菜单

<template>
    <el-aside width="200px">
        <el-menu router>
            <template v-for="v in items" :key="v.url">
                <el-sub-menu v-if="v.children" :index="v.index">
                    <template #title>
                        <el-icon><component :is="v.icon"></component></el-icon>{{v.name}}
                    </template>
                    <el-menu-item v-for="vitem in v.children" :key="vitem.url" :index="vitem.url">
                        <template #title>
                            <el-icon><component :is="vitem.icon"></component></el-icon>{{vitem.name}}
                        </template>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="v.url">
                    <template #title>
                        <el-icon><component :is="v.icon"></component></el-icon>{{v.name}}
                    </template>
                </el-menu-item>
            </template>
        </el-menu>    
    </el-aside>
</template>
<script setup>
import {ref,reactive} from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'

const items = reactive([
    {
        name:"Navigator",
        icon:IconMenu,
        index: 1,
        children:[
            {
                name:"Navigator one",
                url:"/testone",
                icon:Setting
            },
            {
                name:"Navigator four",
                url:"/testfour",
                icon:Setting
            }
        ]
    },
    {
        name:"Navigator two",
        icon:Message,
        index: 2,
        children:[
            {
                name:"Navigator two two",
                url:"/testtwo",
                icon:Setting
            }
        ]
    },
    {
        name:"Navigator three",
        url:"/testthree",
        icon:Message
    },
    {
        name:"Navigator five",
        url:"/testfive",
        icon:Message
    }
])
</script>