Vue add delete component

by hakan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<div id="app">
  <button @click="addComponent">Add Component</button>
  <button @click="deleteComponent">Delete Component</button>
  
  <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name"></component>
</div>

CSS

#app {
  padding: 2rem;
}

JavaScript

const Reusable = {
  template: '<div :id="ida">{{ name }} {{ bar }} {{ ida }}</div>',
  
  props: {
    name: {
      type: String
    },
    ida: {
      type: String
    }
  },
  
  data () {
    return {
      bar: 'Bar'
    }
  }
}

const App = new Vue({
  el: '#app',
  
  data: {
    items: [],
    idet: 12,
  },
  
  methods: {
    addComponent () {
      let idet = this.idet++;
      
      const renderComponent = {
        render (h) {         
          return h(Reusable, {
            class: ['foo'],
            
            props: { 
              name: 'Foo',
              ida: idet
            }
          })
        }
      }
      
      this.items.push(renderComponent)      
    },
    deleteComponent () {
      this.items.splice(0,1);
    }
    
  }
});