Parent-child communication in VueJS

Child component (a row) sends event to parent component to delete itself, via $emit

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
    <div id="app"></div>
</body>

JavaScript

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() {
   ...