Vue watch监听不起作用

当前页面：home.vue

<template>
　　<div>
　　　　<div class="chart-wrap">
　　　　<nodata v-if="tableNoData" class="newnodata"></nodata>
　　　　<jtable :tableData="tableData" :showColumns="showColumns" :storeDate="store_date" :isDetail='isDetail'></jtable>
　　　　</div>
　　<noNetwork v-if="noNetwork"></noNetwork>
　　</div>
</template>

import nodata from 'src/components/modelNoData.vue';
import noNetwork from 'src/components/noNetwork.vue';
import table from 'src/components/table/table.vue';

export default {
　　components: {
　　　　table,
　　　　nodata,
　　　　noNetwork
　　},
　　data() {
　　　　noNetwork: false,
　　　　tableNoData: false,
       tableData:[]

　　}
}

 

组件：table.vue

<template>
    <div class="table" id="table">
        <table border="1" borderColor="#e5e5e5" class="scrollTable">
                <!-- 表头 -->
                <thead :class="{'time_xi': tableData.columns[0].field == 'time_xi'}">
                </thead>
                <tbody>
                          <template v-for="(item,indexs) in tableData">
                                 <tr><td></td></tr>
                                 <div v-show='i==indexs' class='detailr' :style='{height:h+"rem"}'></div>
                          </template>
                </tbody>
        </table>
    </div>
</template>


export default {
    props: ['tableData'],
    data() {
        return {
            i: 'i',
        }
    },     
    watch: {
        //引用类型变量、采用深度监听
        tableData: {
            // 表格数据刷新后需清空之前查看的订单详情内容
            handler: function (newVal, oldVal) {
              this.i = 'i';
           },
           deep: true
        },
    }
}