vue 如何在v-for中插入组件？

Question

<template>
    <div>
        <ul>
            <template v-for="item in items">
                <li v-if="item.flag">
                    <!-- [已解决，如下]这里怎样调用DemoModel组件？ -->
                    <component :is="item.model"></component>
                </li>
                <li v-else >{{ item.text }}</li>
            </template>
        </ul>
    </div>
</template>

<script>
// DemoModel 这里只是例子，实际组件名不会是 1-n
import DemoModel1 from "./demo-model1";
// ...
import DemoModelN from "./demo-modeln";

export default {
    data() {
        return {
            items:[
                {
                    text: "item 1",
                    flag: false
                },
                // ...
                {
                    text: "item n",  // 假定 n > 100，请不要考虑手写html
                    flag: false
                },
                {
                    text: "model 1",
                    flag: true,
                    model: DemoModel1
                },
                // ...
                {
                    text: "model n",
                    flag: true,
                    model: DemoModelN
                },
            ]
        }
    },
    components: {
        DemoModel1, 
        //...
        DemoModelN
    }
}
</script>

我现在需要动态的创建组件，以上代码为简化版本，请问该怎么实现呢？

Answer 1

component is 动态组件了解一下：
https://cn.vuejs.org/v2/guide...

Answer 2

<li v-if="item.flag">

 <DemoModel+index+1></DemoModel+index+1>

</li>