vue tab切换时 迷糊的事

1、传参tab切 ，改变内容 样式等问题

<div class="report-forms-use">
  <div v-for="(item,index) in text" :key="item.name"  :class="[item.type,     queryParams.sourceType === item.name ? 'active':'']" @click="tabChange(item.name)" > {{item.name}}</div>
</div>
<div class="follow_bc">

 <div class="tab_two">
                <div
                    @click="tabClick(item.id, i)"
                    v-for="(item, i) in tabsList"
                    :key="i"
                    ref="label"
                    :class="item.id === groupId ? 'active' : ''"
                    class="second_tab"
                >
                    {{ item.name }}
                </div>

            </div>
            <div class="bottom_line" v-if="tabsList.length"></div>
       </div>
        <div v-show="groupId === 0">1内容</div>
        <div v-show="groupId === 1">2内容</div>
        <div v-show="groupId === 2">3内容</div>
``` 
//  1.通过 v-if 来显示隐藏
<div v-if="queryParams.sourceType === '流量'">
</div>
<div v-else-if="queryParams.sourceType === '短信'">
</div>
<div v-else>
</div>
```

  data(){
    return{
       text:[
         {type:'report-left',name:'流量'},
         {type:'report-middle',name:'短信'},
         {type:'report-right',name:'语音'}
       ],
          tabsList: [
            { name: 'tab1', id: 0 },
            { name: 'tab2', id: 1 },
            { name: 'tab3', id: 2 },
        ], 
       groupId: 0,
   }
 }

`methods:{
    tabChange(name){
      this.queryParams.sourceType = name
    },
    tabClick(id, i) {
        this.groupId = id;
        let doc = document.getElementsByClassName('bottom\_line')\[0];
        let left = this.$refs.label[i].offsetLeft + 'px';
                   let width = this.$refs.label\[i].clientWidth + 'px'; 
        doc.style.width =`${width}`;
        doc.style.transform = `translateX(${left})\`;
        doc.style.transition = '.3s';
      }
}