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">
  <button v-on:click="plus">Поприветствовать родителя</button>
</template>

JavaScript

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