element ui el-tab 只显示第一个标签内容, 切换不会渲染，感觉是找不到ID

Question

element ui el-tab 只显示第一个标签内容, 切换不会渲染，感觉是找不到ID
大佬求帮助

<template>
  <div class="view_region">

    <el-row :gutter="10">
      <el-col :span="12">
        <span class="title">AlphaFold</span>
        <el-tabs v-model="activeTab_af" type="border-card" style="padding: 0" @tab-click="changeTab_af">
          <el-tab-pane :name="item" :label="'Model ' + (index + 1)" v-for="(item,index) in models_af" :lazy="true">
            <!--  -->
            <div class="view_3d" :id="item"></div>
          </el-tab-pane>

        </el-tabs>
      </el-col>
      <el-col :span="12">
        <span class="title">RoseTTAFold</span>
        <el-tabs v-model="activeTab_rt" type="border-card" @tab-click="changeTab_rt">
          <el-tab-pane :name="item2" :label="'Model ' + (index2 + 1)" v-for="(item2,index2) in models_rt" :lazy="true">

            <div :id="item2" style="height: 400px; width: 100%;" v-if="activeTab_rt===item2"></div>
          </el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  var NGL = require('ngl');

  export default {
    data() {
      return {
        activeTab_af: 'model_af1',
        activeTab_rt: 'model_rt1',
        models_af: ['model_af1', 'model_af2', 'model_af3', 'model_af4', 'model_af5'],
        models_rt: ['model_rt1', 'model_rt2', 'model_rt3', 'model_rt4', 'model_rt5'],
        loadFile_af: 'rcsb://1CRN',
        fileObj: {
          'model_af1': 'rcsb://1CRN',
          'model_af2': 'rcsb://7bv2',
          'model_af3': 'rcsb://1CRN',
          'model_af4': 'rcsb://7bv2',
          'model_af5': 'rcsb://1CRN',
          'model_rt1': 'rcsb://7bv2',
          'model_rt2': 'rcsb://1CRN',
          'model_rt3': 'rcsb://1CRN',
          'model_rt4': 'rcsb://1CRN',
          'model_rt5': 'rcsb://1CRN',

        }
      }
    },

    //
    mounted() {
      this.ngl_view('model_af1')
      this.ngl_view('model_rt1')
      // this.ngl_view('model_af2') ## 添加就会出错
      // this.ngl_view('model_rt2')

    },

    methods: {

      changeTab_af() {
        // this.$message.success(this.activeTab_af)
        this.ngl_view(this.activeTab_af)

      },

      changeTab_rt: function (tab, event) {
        // this.$message.success(this.activeTab_rt)
        this.ngl_view(this.activeTab_rt)


      },

      ngl_view(item) {
        // create a `stage` object
        // this.$message.success(item)
        let stage = new NGL.Stage(item);
        // // load a PDB structure and consume the returned `Promise`
        stage.loadFile(this.fileObj[item])
          .then(function (o) {
            // add a "cartoon" representation to the structure component
            // 0.addRepresentation("cartoon");
            o.addRepresentation("cartoon", { color: 'chainid' });
            // provide a "good" view of the structure
            o.autoView();
          });
      },


    },
  }
</script>

<style lang="less" scoped>
  .view_region {
    padding-top: 10px;

    .title {
      display: flex;
      text-align: center;
      justify-content: center;
      padding-bottom: 5px;
    }
  }

  .el-tabs--border-card>.el-tabs__content {
    padding: 0px;
  }

  .el-tabs {
    padding: 0px;

    .content {
      height: 100%;
      width: 100%;
      padding: 0px;
    }
  }

  .view_3d {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;

  }
</style>

console的错误

log.js?1afd:24 [HMR] Waiting for update signal from WDS...
ngl.esm.js?af5c:20935 THREE.WebGLRenderer 86
ngl.esm.js?af5c:20935 THREE.WebGLRenderer 86
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'getBoundingClientRect' of null"

found in

---> <ElTabs> at packages/tabs/src/tabs.vue
       <ElCol>
         <ElRow>
           <StructureResults> at src/components/structure/structure_results.vue
             <ElMain> at packages/main/src/main.vue
               <ElContainer> at packages/container/src/main.vue... (2 recursive calls)
                 <Home> at src/components/Home.vue
                   <App> at src/App.vue
                     <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
handleTabClick @ index.js?9e2f:1
click @ index.js?9e2f:1
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property 'getBoundingClientRect' of null
    at new Viewer (ngl.esm.js?af5c:50323)
    at new Stage (ngl.esm.js?af5c:73559)
    at VueComponent.ngl_view (structure_results.vue?47cd:83)
    at VueComponent.changeTab_af (structure_results.vue?47cd:69)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2188)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3903)
    at VueComponent.handleTabClick (index.js?9e2f:1)
    at click (index.js?9e2f:1)
logError @ vue.runtime.esm.js?2b0e:1897
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
handleTabClick @ index.js?9e2f:1
click @ index.js?9e2f:1
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961