Nuxt.jsでコンポーネントを作成した際に、component has been registered but not usedとなってしまう。

前提・実現したいこと

ボタン群がある画面が複数あり、同じボタンなのでコンポーネントを作成しようとしたのですが、以下のエラーが出てしまいます。
別でステッパーというのでしょうか？プログレスバー？のような今全体としての操作進捗は何%暗いですよと表示するものも画面を通じて出すのでそれもコンポーネントにしようと思っていてそちらは出せたのですが、ボタンだけがうまくいかずに…
同じようにやっているつもりなのですが、どこかおかしなとこなどあればご教示ください。
※いったん、ボタンのソースはステッパーと同じ中身を使用しています。

発生している問題・エラーメッセージ

The "button" component has been registered but not used  vue/no-unused-components

該当のソースコード

/components/ui/button.vue

vue
1<template lang="html">
2  <div class="main bg-light-dark">
3    <div class="container">
4      <div class="row bg-light-dark px-5">
5        <div class="col py-5">
6          <div class="d-flex">
7            <div class="circle d-inline-block rounded-circle align-items-center bg-success" />
8            <b-progress :value="30" height="8px" variant="red" class="flex-grow-1 align-self-center rounded-0" />
9            <div class="circle d-inline-block rounded-circle bg-secondary" />
10            <b-progress :value="0" height="8px" variant="red" class="flex-grow-1 align-self-center rounded-0" />
11            <div class="circle d-inline-block rounded-circle bg-secondary" />
12          </div>
13        </div>
14      </div>
15    </div>
16  </div>
17</template>
18
19<script>
20export default {
21  // TODO 全体的に仮実装中
22}
23</script>
24
25<style lang="scss" scoped>
26.circle {
27  width:  50px;
28  height: 50px;
29}
30</style>
31

/components/ui/stepper.vue

vue
1<template lang="html">
2  <div class="main bg-light-dark">
3    <div class="container">
4      <div class="row bg-light-dark px-5">
5        <div class="col py-5">
6          <div class="d-flex">
7            <div class="circle d-inline-block rounded-circle align-items-center bg-success" />
8            <b-progress :value="30" height="8px" variant="red" class="flex-grow-1 align-self-center rounded-0" />
9            <div class="circle d-inline-block rounded-circle bg-secondary" />
10            <b-progress :value="0" height="8px" variant="red" class="flex-grow-1 align-self-center rounded-0" />
11            <div class="circle d-inline-block rounded-circle bg-secondary" />
12          </div>
13        </div>
14      </div>
15    </div>
16  </div>
17</template>
18
19<script>
20export default {
21  // TODO 全体的に仮実装中
22}
23</script>
24
25<style lang="scss" scoped>
26.circle {
27  width:  50px;
28  height: 50px;
29}
30</style>
31

/pages/sample/sample.vue

vue
1<template lang="html">
2  <div class="main">
3    <stepper />
4    <div class="" />
5    <div class="" />
6    <button />
7  </div>
8</template>
9
10<script>
11import stepper from '~/components/ui/stepper.vue'
12import button from '~/components/ui/button.vue'
13export default {
14  components: {
15    stepper,
16    button  // ここが通っていない
17  }
18}
19</script>
20
21<style lang="scss" scoped>
22</style>
23