element tabs加入动态组价，多次执行组件

Question

<el-tabs :type="type" v-model="activeName" :closable="closable" @tab-remove="removeTab">

    <el-tab-pane
        v-for="(tab) in editableTabs"
        :key="tab.name"
        :label="tab.title"
        :name="tab.name">
        <keep-alive>
            <component v-bind:is="currentTabComponent" v-bind="currentTabComponent.defaults"></component>
        </keep-alive>
    </el-tab-pane>
</el-tabs>

//添加editableTabs 时，导致el-tab-pane组件循环，然后动态组件就多次绘制了，怎么解决请问？
addTab({title,name},component){
        // console.info( '添加标签页 ',title,name );
        let tab = this.editableTabs.filter((tab) => {
            return tab.name === name
        })[0]
        if(!!tab){
            this.activeName = tab.name
            return
        }
        
        this.editableTabs.push({title: title,name: name,content: ''})
        this.components.push({name: name,component: component})
        this.activeName = name
        console.info(this.components);
    },