以编程方式将现有组件附加到VueJS中的现有v模型

Question

就像标题所说，我试图将vue-component附加到现有的v-model

我在互联网上找到的唯一的东西是添加更多元素的v-for解决方案，但这不是我想要做的，因为这个v模型可能有多个组件

chat.vue

我试图追加到

的V模型

<template>
   <ul class="chat-ul" v-model="messages">
       <chat-entry :name="name" :message="text" direction="left"></chat-entry>
   </ul>
</template>

这是我陷入困境的方式，我如何添加组件

<script>
Vue.component('chat-entry', require('./entry.vue'));

module.exports = {
    data: function () {
        return {
            name: 'Default name',
            message: 'Default message',
            messages: null,
        }
    },
    mounted: function () {
        // This is the what i want to achive
        this.messages.append('chat-entry', {direction: 'left', message: 'hello', name: 'HeatON'});


        this.$http.get('/etc/yelp.xi').then(response => {
            for (let q in response.body.arr) {
                this.messages.append('chat-entry', {direction: 'left', message: q.message, name: q.name});
            }
        });
    }
}

entry.vue

<template>
    <div v-if="direction == 'left'">
        <li>
            <div class="message-data">
                <span class="message-data-name"><i class="fa fa-circle you"></i> {{ name }}</span>
            </div>
            <div class="message you-message">  {{ message }} </div>
        </li>
    </div>

    <div v-else>
        <li class="clearfix">
            <div class="message-data align-right">
                <span class="message-data-name">{{ name }}</span> <i class="fa fa-circle me"></i>
            </div>
            <div class="message me-message float-right"> {{ message }}  </div>
        </li>
    </div>

</li>

这样的事情是否可能？如果没有，那么正确的方法是什么？

提前致谢