vue+Framework7+echarts时使用tab组件出现的问题

首先贴一下解决问题之前的代码：

    <!-- Switch Between Tabs -->
    <f7-buttons class="analysisButton">
      <f7-button tab-link="#tabWater" active>水</f7-button>
      <f7-button tab-link="#tabElectric">电</f7-button>
      <f7-button tab-link="#tabGas">汽</f7-button>
    </f7-buttons>
    <!-- Tabs -->
    <f7-tabs>
      <f7-tab id="tabWater" active>
        <!--第一个echarts-->
      </f7-tab>
      <f7-tab id="tabElectric">
        <!--第二个echarts-->
      </f7-tab>
      <f7-tab id="tabGas">
        <!--第三个echarts-->
      </f7-tab>
    </f7-tabs>

出现问题：
在页面加载时这三个tab会同时都加载出来，造成了除active所在的echarts是正常显示，其他两个都可以。
最后的解决方法：

<div class="buttons-row analysisButton">
    <a href="#" class="active button" @click="tabWater">水</a>
    <a href="#" class="button" @click="tabElectric">电</a>
    <a href="#" class="button" @click="tabGas">气</a>
</div>
<div v-if="showWater">
    <!--第一个echarts-->
</div>
<div v-if="showElectric">
    <!--第二个echarts-->
</div>
<div v-if="showGas">
    <!--第三个echarts-->
</div>

.js

export default {
    data() {
      return {
        showWater: true,
        showElectric: false,
        showGas: false
      }
    },
    methods: {
      tabWater() {
        let _this = this;
        _this.showWater = true;
        _this.showGas = false;
        _this.showElectric = false;
      },
      tabElectric() {
        let _this = this;
        _this.showWater = false;
        _this.showGas = true;
        _this.showElectric = false;
      },
      tabGas() {
        let _this = this;
        _this.showWater = false;
        _this.showGas = false;
        _this.showElectric = true;
      }
    }
  }

每个页面在点击按钮选择以后才显示出来。

ps：如果有错误，希望可以提出来~