Вывод нового компонента VueJS при нажатии на кнопку

Как при нажатии на элемент redactor_plus в разметке передавать в массив items компонент app-blog-new-item и выводить этот же массив на странице? Понимаю что делаю это не правильно, но пока только начал изучение Vue js.

Код VueJS

window.onload = function() {
    Vue.component('app-blog-new-item', {
        data: function() {
            return {}
        },
        template: `
        <div>
        <div class="redactor_text_item">
            <div class="redactor_text">
                <div class="redactor_head_text">
                    <input type="text" name="" id="" class="redactor_h1" placeholder="Введите название" required>
                </div>
                <div class="redactor_main_text">
                    <textarea name="" id="" cols="30" rows="10" class="redactor_text_input " placeholder="Введите текст" required>
                        
                    </textarea>
                </div>
            </div>
        </div>
    </div>`
    });
    new Vue({
        el: '.blog_redactor',
        data: {
            items: [],
        },
        methods: {
            addItem() {

            }
        }
    });
}

Разметка

<div class="blog_redactor">
        <div class="redactor_text_item">
            <div class="redactor_plus" @click="addItem">+</div>
            <app-blog-new-item></app-blog-new-item>
        </div>
    </div>