Vue3.x v-for与v-if不能混用, 可是又不能删除v-if, 因为还有v-else

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

创建项目是: vue create h1, 项目使用了element-ui插件.

创建了一个单文件组件: ./components/Menu.vue:

<el-menu :default-active=“activeIndex” class=“el-menu-demo” mode=“horizontal”
[@select](/user/select)=“handleSelect” :collapse-transition=“false”
>

{{item.title}}
{{v2.title}}

{{item.title}}

export default {
    data: function() {
        return {
            activeIndex: '1',
            list: [
                {
                    index: '1',
                    title: 'Home'
                },
                {
                    index: '2',
                    title: 'Out Products',
                    list: [
                        {
                            index: '2-1',
                            title: '选项1'
                        },
                        {
                            index: '2-2',
                            title: '选项2'
                        },
                        {
                            index: '2-3',
                            title: '选项3',
                        },
                        {
                            index: '2-4',
                            title: '选项4',
                            list: [
                                {
                                    index: '2-4-1',
                                    title: '选项2.4.1',
                                },
                                {
                                    index: '2-4-2',
                                    title: '选项2.4.2',
                                },
                                {
                                    index: '2-4-3',
                                    title: '选项2.4.3',
                                }
                            ]
                        },
                    ]
                },
                {
                    index: '3',
                    title: 'Exhibition Notice'
                },
                {
                    index: '4',
                    title: 'About Us'
                },
                {
                    index: '5',
                    title: 'Contact Us'
                }
            ]
        }
    },

    props: [
        
    ],

    computed: {
        
    },

    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        }
    }
}
</script>

<style lang="less" scoped>
    
</style>

但是编译时提示v-for与v-if不能混合, 替换方案是使用computed 方式, 但是我v-if中的东西是v-for中的item, 不是list本身, 所以computed方式似乎不怎么好写, 我要怎么改呢?