Vue VuetifyでのボタンコンポーネントにDialogs機能をつけたい

<template>
    <v-container>
      <v-row justify="center">
        <v-dialog
          v-model="dialog"
          persistent
          max-width="600px"
        >
          <template v-slot:activator="{ on, attrs }">
            /*ボタンA*/
            <btn
              label="送信する"
              :bind="attrs"
              :on="on"
            />
            /*ボタンB*/
            <v-btn
              color="primary"
              dark
              v-bind="attrs"
              v-on="on"
            >
              Open Dialog
            </v-btn>
          </template>
          <v-card>ダイアログの中身</v-card>
        </v-dialog>
      </v-row>


    </v-container>
</template>

<script>
import Btn from '~/components/Btn.vue'

export default {
  components: {
    Btn
  },
  data: () => ({
    dialog: false,
  }),
}
</script>

上記の感じでダイアログを実装したいのですが、
ボタンBは問題なく動くのですが、ボタンAがなにも反応しません。。
どのようにすれば、importしたボタンにもダイアログのファンクションをつけれますでしょうか？
出来れば共通ボタンデザインなのでコンポーネントのままにしておきたく・・

行動規範の内容に同意します

回答1件

ベストアンサー

ご質問にありましたソースを元にBtnコンポーネントを作成し動作させられました。

コンポーネントの中身の問題かと思います。

以下私が作成したBtnコンポーネントです。
Btn.vue

Vue
1<template>
2  <v-btn v-on="on" v-bind="attr">
3    {{ label }}
4  </v-btn>
5</template>
6
7<script>
8export default {
9  props: ['on', 'attr', 'label']
10};
11
12</script>