Vue

HTML

<div id="app">
  <todo-insert @insert="insertTable"></todo-insert>
  <todo-category
    v-for="category in categories"
    :todo="category">
    </todo-category>
</div>

Vue

Vue.component("todo-insert", {
  template: '<div>\
               <input type="text" v-model="message">\
               <button @click="insert">ins</button>\
             </div>',
  data () {
    return {
      message: ""
    }
  },
  methods: {
    insert () {
      this.$emit("insert", this.message)
      this.message = ""
    }
  }
})

Vue.component("todo-category", {
  template: '<div>{{todo}}</div>',
  props: ["todo"]
})

new Vue({
  el: "#app",
  data: {
    categories: []
  },
  methods: {
    insertTable (message) {
       this.categories.push(message)
    }
  }
})