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>
        {{ title }}
    </a>
</template>

<script>
kiwi.plugin('test_userbox_button', function(kiwi, log) {
    var userboxButton = kiwi.Vue.extend({
        template: '#userbox_button',
        data: function data() {
            return {
                title: '',
                count: 10,
            };
        },
        methods: {
            buttonClicked: function buttonClicked(event) {
                console.log('pressed', event);
                console.log('props', this.$el.kiwi);
                console.log('nick:', this.$el.kiwi.user.nick);
                if (this.count <= 0) {
                    return;
                }
                console.log(this.count+'...');
                this.count--;
            },
        },
    });

    var b1 = new userboxButton({data: {title: 'Do NOT Press Here'}});
    b1.$mount();
    kiwi.addUi('userbox_button', b1.$el);

    var b2 = new userboxButton({data: {title: 'Do NOT Press Here'}});
    b2.$mount();
    kiwi.addUi('userbox_button', b2.$el);

    var b3 = new userboxButton({data: {title: 'This is a stupidly long test button just to make sure longer translations do not go wonky'}});
    b3.$mount();
    kiwi.addUi('userbox_button', b3.$el);
});
</script>