vue中如何才能動(dòng)態(tài)地向某個(gè)元素或組件中插入某個(gè)組件？

本人是新手剛剛接觸vue還不太熟悉，所以想請(qǐng)教一下這個(gè)問(wèn)題，在vue中如何才能動(dòng)態(tài)地向某個(gè)元素或組件中插入某個(gè)組件？

目前vue提倡的貌似是掛載的概念，比如有一個(gè)div，當(dāng)按照如下的方式初始化這個(gè)組件時(shí)，#mask元素將被替換為新的組件，而不像傳統(tǒng)做法作為容器元素。但是這樣的規(guī)范自己總感覺(jué)不太習(xí)慣的，因?yàn)檫@次組件初始化后這個(gè)容器元素#mask就被替換了。萬(wàn)一以后我還想往這個(gè)mask元素里放其他組件那該咋辦呢？而且這樣還有個(gè)問(wèn)題，那就是每次我想動(dòng)態(tài)地往頁(yè)面中某個(gè)地方插入元素的時(shí)候，必須找到對(duì)應(yīng)的掛載點(diǎn)，元素掛上去后掛載點(diǎn)就沒(méi)了。如果業(yè)務(wù)場(chǎng)景比較復(fù)雜，插入的時(shí)機(jī)比較頻繁又無(wú)規(guī)律可循，那樣是不是就很麻煩了？望高手多多指教！

 let box = new Vue({
            el: '#mask',
            data: {
                list: [
                    {'id': '3vbkw5ws3morq', 'name': 'aaa'},
                    {'id': 'ki5zyhpdh3qgw', 'name': 'bbb'},
                    {'id': 'cvqpljdwfg2wg', 'name': 'ccc'},
                    {'id': '5bnkticyhkaqm', 'name': 'ddd'}
                ]
             },
             template: `
                <div class="dialogBox">
                   。。。
                </div>
             `,
            props: []
        })