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>
</div>

<template id="child-template">
  <input placeholder="Введите текст..." v-model="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'],
      template: '#child-template',
        methods: {
          plus: function () {
            this.onAdd(this.msg);
            this.msg = '';
          }
        }
    }
  }
})