test_userbox_button.html

<template id="userbox_button">
    <a v-if="count > 0" class="kiwi-userbox-action" @click="buttonClicked($event)">
        <i class="fa fa-warning" aria-hidden="true"></i>
        Do NOT Press
    </a>
</template>
<script>
kiwi.plugin('test_userbox_button', function(kiwi, log) {

    var testArgs = {};
    var userboxButton = kiwi.Vue.extend({
        template: '#userbox_button',
        props: ['user', 'userbox'],
        data: function data() {
            return {
                count: 10,
            };
        },
        methods: {
            buttonClicked: function buttonClicked(event) {
                console.log('pressed', event);
                console.log('user:', this.user);
                console.log('userbox:', this.userbox);
                if (this.count <= 0) {
                    return;
                }
                console.log(this.count+'...');
                this.count--;
            },
        },
    });

    var buttonComponent = new userboxButton();
    buttonComponent.$mount();
    kiwi.addUi('userbox_button', buttonComponent.$el);

    var b2 = new userboxButton();
    b2.$mount();
    kiwi.addUi('userbox_button', b2.$el);

    var b3 = new userboxButton();
    b3.$mount();
    kiwi.addUi('userbox_button', b3.$el);
});
</script>