element 切换Table 展开行效果出bug

期待效果： 通过点击按钮在两个Table间来回切换(Table1有展开行的功能，Table2没有)。
代码如下：

<div id="app">
  <!-- 切换按钮 -->
  <button @click="business_tab=!business_tab">切换</button>
  
  <!-- Table1 -->
  <el-table v-if="business_tab" :data="table_data1" border>
  	<!-- 需要展开的列 -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="编码">
            <span>{{ props.row.code }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="city" label="地市">
    </el-table-column>
    <el-table-column prop="county" label="区县">
    </el-table-column>
  </el-table>
  
  <!-- Table2 -->
  <el-table v-else="!business_tab" :data="table_data2" border >
    <el-table-column prop="people" label="负责人">
    </el-table-column>
    <el-table-column prop="tel" label="联系电话">
    </el-table-column>
  </el-table>
</div>

 let app = new Vue({
    el:'#app',
    data(){
      return{
        business_tab:true,
        table_data1:[
          {code:'3io2-o2j28-2791',city:'成都',county:'内江'},
          {code:'3i2i-o2j28-2791',city:'成都',county:'武侯'}
        ],
        table_data2:[
          {people:'张三',tel:'183 xxxx xxxx'}
        ],
      }
    }
  })

实际效果： 两Table切换时，Table1的展开效果影响到了Table2。


解决办法：
方法1：将v-if换成v-show
方法2：给两个表的el-table标签上都加上key


解决效果：