Vue добавить индексированный элемент массива как связывание и иметь динамически добавленный компонент реагировать на него

Question

Я пытаюсь отреагировать списком чатов на массив и добавить новые чаты нажатием кнопки. Я звоню openchat с идентификатором, чтобы сделать это. вот кодЯ получаю сообщение об ошибке «_vm.chats is undefined» при запуске, и новые окна чата при открытии пустые. Спасибо, если у вас есть идеи !!

(app.js)

data: {
    chats: ''
}

openchat: function(chatId)
        this.chats = [];
        this.chats[chatId] = [];
        this.chats[chatId].push('simple');

(index.blade.php)

<chat v-for="(chat, index) in chats" :index="index" v-bind:chats="chats[index]"></chat>

(chat.vue)

    <template>
                <div v-for="chat in chats" style="overflow: auto;">
                        {{ chat.chat }}
                </div>

    <chat-composer v-bind:chats="chats[chatId]" v-bind:chatId="chatId"></chat-composer>
    </template>

<script>
    export default {
        props: ['chats', 'userId', 'chatId']
    }
</script>

(ChatComposer.vue)

props: ['chats', 'userId', 'chatId'],
this.chats[chatId].push(data)