Vuejs三个请求服务器而不是一个

Question

我有一个组件（模板） table-news ，我用它来显示不同的数据。 当我点击按钮时，它将按钮的名称传递给我的组件（按钮的名称表示用户想要查看的数据：新闻，电子邮件等），因此我需要显示所需的数据类型 所以，问题是：当我点击按钮时，我收到3个请求到我的服务器。我认为这是因为 table-news 呈现三次，但用户只看到一个部分。我该如何解决？只使用3个不同的组件（模板）？

<el-tabs @tab-click="handleClick" active-name="first">
       <el-tab-pane label="firstTab" name="first">
         <table-news></table-news>
       </el-tab-pane>
       <el-tab-pane label="secondTab" name="second">
         <table-news></table-news>
       </el-tab-pane>
       <el-tab-pane label="thirdTab" name="third">
         <table-news></table-news>
       </el-tab-pane>
     </el-tabs>
   </el-tab-pane>


   methods: {
     handleClick(tab){
       this.$bus.$emit('setNewsType', tab.name)
     }
   }

在table-news这样的事情中：

data(){
    return{
      newsType: 'first'
    },
    watch: {
      newsType: function(){
        this.fetch()
      }
    },
    methods: {
      fetch() {
        services.getSomeDataFromServer(this.newsType).then(data=>{})
      },
       setNewsType(type){
       this.newsType = type;
     },
    mounted() {
      this.$bus.$on('setNewsType', this.setNewsType)
      this.fetch();
    }