Cannot get checkout button to show up

[avishjain]

Hi there,

I followed the readme and am trying to get the checkout button to show up but cannot get it to do so after compiling.

I'm also getting these errors in console:

[Vue warn]: Computed property "total" was assigned to but it has no setter. [Vue warn]: Unknown custom element: <stripe-checkout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

This is the code I'm using. Is there something I'm doing wrong? Thanks!

<stripe-checkout stripe-key="[KEY HERE]" product="product"></stripe-checkout>

<script>
    import StripeCheckout from 'vue-stripe';

    export default {
        data() {
            return {
                addons: this.addons_data,
                addonsSelected: [],
                donationPresets: [10,20,50],
                donation: 0,
                event: this.event_data,
                price: this.price_data,
                addonTotal: 0,
                product: {
                    name: "YJA",
                    zipCode: true,
                    label: "Pay Now",
                    description: '',
                    amount: 0
                }
            }
        },
        props: ['addons_data', 'event_data', 'price_data', 'csrf'],
        methods: {
            selectInArray(prop,value,key) {
                if ((this[prop]).includes(value) == false) {
                    this[prop].push(value);
                } else {
                    this[prop].splice(key, 1);
                }
                var addonTotal = 0;
                for (var i = 0; i < this.addonsSelected.length; i++) {
                    addonTotal += parseInt(this.addonsSelected[i].price);
                }
                this.addonTotal = addonTotal;
            },
            selectItem(prop,value,key){
                if (this[prop] == value){
                    this[prop] = 0;
                } else {
                    this[prop] = value;
                }
            },
            arraySelect(prop,item){
                if ((this[prop]).includes(item) == true) {
                    return 'panel-warning';
                }
            },
            propSelect(prop, item){
                if(item == 'custom'){
                    if(this[prop] != 0 && this[prop] != null && this.donationPresets.includes(this[prop]) == false){
                        return 'panel-warning';
                    }
                } else {
                    if(this[prop] == item){
                        return 'panel-warning';
                    }
                }
            },
        },
        computed: {
            total: function(){
                var grandTotal = parseInt(this.price) + parseInt(this.addonTotal) + parseInt(this.donation);
                this.product.amount = grandTotal;
                return grandTotal;
            },
            addonsSelectedString: function(){
                return JSON.stringify(this.addonsSelected);           
            }
        },
        created() {
            this.total = this.price;
            this.product.description = this.event.name + " Checkout";
        },
        components: {
            'stripe-checkout': StripeCheckout
        }
    } 
</script>

[matfish2]

import { StripeCheckout } from 'vue-stripe'