Vue.js の button component をリクエスト中のみ disabled にする方法

Vue.js の button component を axios リクエスト中のみ disabled にする方法についての質問です

単純に button を リクエスト中に disabled にするだけであれば

<template>
  <div>
    <button @click="handleClick" :disabled="disabled">
      更新
    </button>
  </div>
</template>

<script>
  export default {
    data() {
      return()  {
        {
          disabled: false 
        }
      }
    },
    methods: {
      handleClick() {
        this.$data.disabled = true
        requestApi() // リクエストメソッド (@return Promise)
          .then(_ => this.$data.disabled = false)
      }
    }
  }
</script>

でよいと思うのですが, アプリケーション中にいくつも同じような button を置くので vue component 化しようとしました.

<template>
  <button @click="handleClick" :disabled="disabled">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    data() {
      return() {
        disabled: false
      }
    },
    methods: {
      handleClick() {
        this.$data.disabled = true
        this.$emit("click") // リクエストが終わったことを受け取るすべがわからない
      }
    }
  }

</script>

// --- 


<template>
  <div>
    <request-button @click="requestApi">
      更新
    </request-button>
  </div>
</template>

<script>
  import RequestButton from './RequestButton' 
  export default {
    components: { RequestButton }
  }
</script>

上記のような実装を想定したのですが, 親コンポーネントが実行したリクエストを子コンポーネントが受け取る方法がわからない状態です.

親コンポーネントに disabled 判定の data を用意して 子コンポーネントに渡しても, disabled の切り替えは 親コンポーネントで行わなければならず, コンポーネント切り出しする意味が薄れるように思います.

良い解決案をご提示いただければ幸いです.