how to remove given child component from parent's array (including dynamically added elements) ?

gistfile1.html

<div id="some-id">
  <category v-for="category in categories"
          :id="category.id"
          :name.sync="category.name"
  </category>
  
  // we add items to the categories array dynamically
  <button @click="categories.push({})">Add categories</button>

</div>



Vue.component('category', {
  props : ['id', 'name'],
                              // how to remove given element here?
  template : `<div>{{ name }} <button @click="remove">X</button></div>`
}

new Vue({
    el : '#some-id',
    data : {
        categories : [{ id : 1, name : 'cat name' }, ... ]
    }
})

the clean way would be to dispatch an event to the parent component with the category to remove (to prevent tight coupling of the components. you could access the categories in the parent component from the child through this.$parent.categories, but that's discouraged for the aforementioned reason)

<div id="some-id">
  <category v-for="category in categories"
          :category="category"
  </category>

  // we add items to the categories array dynamically
  <button @click="categories.push({})">Add categories</button>

</div>

Vue.component('category', {
  props : ['category'],
  methods: {
    remove: function(category) { this.$dispatch('removeEvent', category) }
  }
  template : `<div>{{ category.name }} <button @click="remove(category)">X</button></div>`
}

new Vue({
  el : '#some-id',
  data : {
      categories : [{ id : 1, name : 'cat name' }, ... ]
  },
  events: {
    removeEvent: function(category) { this.categories.$remove(category) }
  }
})