<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>

我現(xiàn)在需要動態(tài)的創(chuàng)建組件，以上代碼為簡化版本，請問該怎么實現(xiàn)呢？