deleting child component removes that component and all child components created after it

I've run into a problem when I delete a component any component created after it deleted and then recreated. Component in question gets deleted and child component created after it get deleted and then recreated.

Is there a reason why this is happening?

here is a video of it

Here is fiddle

fiddle code:

Vue.component('column-component', {
    props: ["columnData", "uniqueId"],
    mounted: function() {
        console.log('mounting column: ' + this.uniqueId)
    },
    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    },
    template: `
        <div style="float: left; padding: 10px; margin-right: 10px; border: 1px solid black;">aaa</div>`
})

Vue.component('row-component', {
    props: ["rowData", "uniqueId"],
    data: function data() {
      return {
        columns: [],
        columnCount: 0
       }
    },
    mounted: function() {
        console.log('mounting row: ' + this.uniqueId)
    },
    methods: { 
      addColumn() {
        console.log
                    var column = new Object()
          column.uniqueId = this.uniqueId +'.col.'+ this.columnCount
          this.columns.push(column)
          this.columnCount = this.columnCount + 1
      }
    },
    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    },
    template: `
        <div>
         <div style="margin: 10px; padding: 20px; background: rgba(0,0,0, 0.5);">
            row component: {{rowData.text}}
            <div class="column" v-for="(column, index) in columns">
                    <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component>
            </div>
            <div style="clear: both;"></div>
            <div style="margin-top: 35px;">
                <button @click="addColumn()">add column</button>
            </div>
          </div>
        </div>`
})

new Vue({
    el: '#app',
    template: `
        <div>
            <div v-for="(row, index) in rows">
            <row-component :uniqueId="row.uniqueId" :row-data="row" :key="row.uniqueId"></row-component>
            <button @click="deleteThisRow(index)">remove row</button>
         </div> 
         <button @click="addRow()">add</button>
        </div> 
    `,
    data: {
        rows: [],
        rowCount: 0

    },
    mounted: function() {
        this.addRow()
      this.addRow()
      this.addRow()
    },
    methods: {
            addRow() {
            var row = new Object()
          row.uniqueId = 'row-' + this.rowCount
          row.text = 'row-'+(this.rows.length)
            this.rows.push(row)
          this.rowCount =  this.rowCount + 1
        },
        deleteThisRow: function(index) {
            this.rows.splice(index, 1)

            console.log(this.rows)
        }
    }
})