vue.js - VueJS Component, can't override class

Question

i'm trying to over-ride a certain instance of my VueJS Component, however for some reason the component is still using the default value.

The value i'm trying to over-ride is the buttonClass. The other props seem to work fine, so not too sure as to why this one isn't working.

Instance:

<delete-button buttonClass="is-info" csrf="{{ csrf_token() }}" action="redirects/delete-all"
               text="Delete All" body="This will delete ALL redirects"></delete-button>

Component:

<template>
    <form v-bind:action="action" method="post" @submit.prevent="confirm($event)">
        <input type="hidden" name="_token" v-model="csrf">
        <input type="hidden" v-model="id" name="id-value">
        <button type="submit" :class="['button is-link', buttonClass]">
            <i class="fas fa-trash-alt"></i>
            <span v-html="text"></span>
        </button>
    </form>
</template>
<script>
    export default {
        props: {
            'id': {},
            'csrf': {},
            'action': {},
            'buttonClass': {
                default: 'is-danger'
            },
            'text': {
                default: 'Delete'
            },
            'title': {
                default: 'Are you sure?'
            },
            'body': {
                default: ''
            }
        }
        // etc
    }
</script>

Answer 1

Depending on how this is all put together, props in the template are sometimes required to be kebab-cased, ie

<delete-button button-class="is-info" ...

See https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents

FYI, single-file components do use "in-DOM templates".