事件触发偶然异常

[GeniusFunny]

今天遇到一个很奇怪的问题，我在'add'页面绑定了三个事件，A事件(tab)是切换UI状态 '单人/多人'，B事件是往任务清单中添加新的子任务，C（tcButton）事件是提交任务清单。A、C事件都是绑定在自定义组件上，通过自定义组件的子组件触发，向父组件传达信息。
以下代码为省去了与此issue无关的代码后的情况
'add'页面代码如下(省去了与此issue无关紧要的代码):

<template>
  <div>
    <div class="add">
      <tab :type="info.type" @changeTaskType="changeTaskType"/> <!-- 事件A挂载的组件 -->
      <div>
        <div class="add-addTaskItem">
          <img src="/static/images/addButton.png" @click="addSubTask" id="img"/>  <!-- 事件B挂载的组件 -->
        </div>
      </div>
    </div>
    <TcButton @buttonClick="createTask">创建任务</TcButton>   <!-- 事件C挂载的组件 -->
  </div>
</template>

<script>
  import tab from '../../components/tab'
  import tcButton from '../../components/button'

  export default {
    data () {
      return {
        info: {
          type: 'multiplayer'
    },
    components: {
      tab,
      tcInput,
      tcButton
    },
    methods: {
      // 事件A
      changeTaskType (type) {
        this.info.type = type
        console.log('事件A')
      },
     // 事件B
      addSubTask (e) {
        console.log('事件B')
      },
     // 事件C
      createTask () {
        console.log('自定义事件ButtonClick的处理函数在这里, 事件C')
      }
    }
  }
</script>

Tab组件代码如下：

<template>
  <div class="tc-tab" @click="tabClick">
    <div
      class="tc-tab-item"
      :class="[
        type === 'daily' ? 'tc-tab-item-active' : ''
      ]"
      id="daily"
    >单人</div>
    <div
      class="tc-tab-item"
      :class="[
        type === 'multiplayer' ? 'tc-tab-item-active' : ''
      ]"
      id="multiplayer"
    >多人</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        data: {}
      }
    },
    props: {
      type: {
        type: String,
        default: 'daily'
      }
    },
    methods: {
      tabClick (e) {
        this.$emit('changeTaskType', e.target.id)
      }
    }
  }
</script>

状况一：A事件正常，C事件点击无反应，此时A、C事件绑定格式均相同。
tcButton代码如下：

<template>
  <div class="tc-button" @click="handleClick" id="button">
    <img src="/static/images/button.png"/>
    <div class="tc-button-info">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick (e) {
        console.log('我点击的是 Button 组件， 触发父组件buttonClick事件, ')
        this.$emit('buttonClick', e)
      }
    }
  }
</script>

状况二：A事件正常，C事件点击后触发了B事件。
tcButton代码如下：

<template>
  <div class="tc-button" @click="handleClick" id="button">
    <img src="/static/images/button.png"/>
    <div class="tc-button-info">
      <slot @click="handleClick"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick (e) {
        console.log('我点击的是 Button 组件， 触发父组件buttonClick事件, ')
        this.$emit('buttonClick', e)
      }
    }
  }
</script>

情况如上，如果是因为我写bug导致了此issue，希望大家能指出来；如果大家也存在此类问题，希望能大神们一起讨论讨论。
（动图不会做，，，，）
下列是情况1，依次点击绑定了事件A、B、C的效果图。

下列是情况2，依次点击绑定了事件A、B、C的效果图。

github地址在这里：https://github.com/GeniusFunny/TaskCompetition。
代码在src/pages/add/index.vue 、src/components/tab.vue、 src/components/button.vue