el-table在使用v-if视图不更新的问题

在使用elementUI的表格时，会遇到使用v-if但是视图没有更新
比如

  <div class="tablePart" v-if="searchForm.taskArea=='省交通运输厅领域'">
    <el-table :data="tableData" stripe style="width: 100%" height="100%">
      <el-table-column prop="taskName" label="任务名称" align="center"></el-table-column>

      <el-table-column prop="checkRange" label="检查范围" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-button @click="editMethod1(scope.row)" type="text">修改</el-button>
          <el-button @click="viewMethod(scope.row)" type="text">查看详情</el-button>
          <el-button type="text" @click="delMethod(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="tablePart" v-if="searchForm.taskArea=='省市场监管领域'">
    <el-table :data="tableData" stripe style="width: 100%" height="100%">
      <el-table-column prop="checkType" label="检查类型" align="center"></el-table-column>
      <el-table-column prop="itemType" label="事项类别" align="center"></el-table-column>
      <el-table-column prop="checkObject" label="检查对象" align="center"></el-table-column>
      <el-table-column label="任务周期" align="center">
        <template slot-scope="scope">
          {{scope.row.taskStartTime}}-{{scope.row.taskEndTime}}
        </template>
      </el-table-column>
      <el-table-column prop="checkRange" label="检查范围" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-button @click="editMethod2(scope.row)" type="text">修改</el-button>
          <el-button @click="viewMethod2(scope.row)" type="text">查看详情</el-button>
          <el-button type="text" @click="delMethod(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

只需要在table中加入key值

<el-table :data="tableData"  key="table1" stripe style="width: 100%" height="100%">

就可以解决