Vue слушает, когда глубокий реквизит не срабатывает

/**** Table ***/
<template>
    <table>
    <HeaderRow :columns=computedColumns :groups=columnGroups v- 
        on:column:change=onColumnChange></HeaderRow>
    <tbody>
         <Row v-for = "(row, index) in computedData" :key=index :data=row 
              :columns=computedColumns :rowIndex=index ></Row>
    </tbody>
    </table>
</template>
<script>
import Row from "./Row.vue";
import HeaderRow from "./HeaderRow.vue";
export default {
	computed: {
    /* If this.columns is set (columns is a prop) than map it to a new array, otherwise 
       try to identify the columns from the row data */
		computedColumns: function() {
      if (this.columns && this.columns.length) {
				return this.columns.map(col => {
                    return Object.assign({
                        title: '',
                        name: '',
                        description: undefined,
                        className: '',
                        style: '',
                        visible: true,
                        sort: false,
                        group: undefined,
                        defaultValue: undefined,
                    }, col)
                });
			} else {
				return (
					this.data &&
					this.data
						.map(function(row) {
							return Object.keys(row);
						})
						.reduce(function(arr, row) {
							return arr.concat(
								row.filter(function(value, index) {
									return arr.indexOf(value) == -1;
								})
							);
						}, [])
						.map(function(column) {
							return {
								title: column,
								name: column
							};
						})
				);
			}
		},
   }

/*** HeaderCell ***/ 
    <th @click=toggleColumn :class=className><span>{{column.title}}</span></th>
    ...
    ...
    toggleColumn: function(e) {
    		this.visible = !this.visible;
    		this.column.visible = this.visible;
    		this.$emit("column:change", {
    			column: this.column,
    			columnIndex: this.columnIndex
    		});
    	}

/***   Row  ****/
    <template>
    <tr>
      <td  v-for = "(cell, index) in cells" :key=index :class=cell.className 
    :style=cell.style v-html=cell.value ></td>
    </tr>
    </template>
    <script>
    export default {
    props: {
        data: {
            default: []
        },
        columns: {
            default: "",
            type: Array
        },
        rowIndex: {
            default: -1
        }
    },
    watch: {
        columns: {
            handler: function () {
                console.info('change occurred')
            },
            deep: true
        }
    },