Boa tarde, segui todos os passos até aqui, porém, o meu botão não dispara a ação.

<template>
    <buttom
        @click="disparaAcao()"
        :type="tipo"
        :name="nome"
        class="botao"
        :class="estiloDoBotao"
    >
        {{ rotulo }}
    </buttom>
</template>

<script>
    export default {
        props: {
            tipo: {
                required: true,
                type: String
            },
            rotulo: {
                required: true,
                type: String
            },
            nome: String,
            confirmacao: Boolean,
            estilo: String
        },
        methods: {
            disparaAcao(){
                if(this.confirmacao) {
                    if(confirm('Confirma a operação?')) {
                        this.$emit('botaoAtivado');
                    }
                    return;
                }
                this.$emit('botaoAtivado');
            }
        },
        computed: {
            estiloDoBotao: function () {
                if (this.estilo === 'padrao' || !this.estilo) return 'botao-padrao';
                if (this.estilo === 'perigo') return 'botao-perigo';
            }
        }
    }
</script>

<style lang="scss" scoped>
    .botao {
        display: inline-block;
        padding: 10px;
        border-radius: 3px;
        margin: 10px;
        font-size: 1.2em;
        cursor: pointer;
    }

    .botao-padrao {
        background: #0000ff;
        color: white;
    }

    .botao-perigo {
        background: firebrick;
        color: white;
    }
</style>

Alguém sabe o que fazer?