JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
  <ul>
     <li v-for="item in items" track-by="$index">
      {{ item }}
    </li>
  </ul>
  <child v-bind:on-add="handleAdd"></child> <!-- передаем props. У дочернего будет props с названием onAdd, а в него запишется ссылка на функцию из родителя handleAdd -->
</div>


<!-- Шаблон для дочернего компонента -->
<template id="child-template">
  <input placeholder="Введите текст..." v-model="msg"> <!-- Msg - это просто в дочернем компоненте будет поле, которое мы не обязаны инициализировать в js. Это связывание нужно для того, чтобы не искать по DOM этот инпут и не вытаскивать из него значение. Просто когда будем набирать текст в инпут, то msg сразу будет иметь это значение  -->
  <button v-on:click="plus">Add</button>
</template>

JavaScript

new Vue({
  el: '#demo',
  data: {
    items: [],
  },
  methods: {
    handleAdd: function(msg) {
			this.items.push(msg);
    }
  },
  components: {
    child: {
      props: ['onAdd'], // Объявляем props. В него передается функция handleAdd из родителя
      template: '#child-template',
        methods: {
          plus: function () { // в дочернем есть метод plus, в которым мы вызваем props onAdd
            this.onAdd(this.msg); // msg - это всё для примера, можно просто вызвать как this.onLoad('Привет из дочернего компонента');
            this.msg = '';
          }
        }
    }
  }
})