vue.js1 event not emitting if 4 listerns are registered

Question

I have a very weird issue. I might be doing something very silly here but not aware of it. I am using vue.js 1. I have a component which is a bootstrap modal that emits 4 custom events. For each of these, I have a listener registered on the parent. The very strange issue is, whenever i am registering the 4th listener, the event that this 4th listener is registered for is not emitting!

    // on parent component template...

    <fbu-create-maker-commission-modal 
        v-ref:new-commission-modal
        modal-id="addSpCommissionModal"
        :show-modal="showCreationModal"
        v-on:hiding-modal="onHidingModal"
        v-on:sp-commission-created="onCreatingNewSpCommission"
        v-on:sp-commission-updated="onUpdatingSpecialCommission"
        v-on:sp-commission-remove="onDeletingSpecialCommission"
        :modal-template-data="templateData"
        :mode="modalLaunchMode"
        :object-to-edit="toEditObject"
    ></fbu-create-maker-commission-modal>


    // child component code where the events are emitted from
    editCommission() {
        let config = Object.assign({}, this.modalTemplateData.httpConfig.updateSpecialCommission, { body: this.form.formData })
        
        this.$http(config).then(response => {
            console.log(response);
            if(this.isVueResourceResponseValid(response)) {
                this.$emit('sp-commission-updated', response.body.data.updatedCommission);
                this.handleModalClose();
            }
        }).catch(errorResponse => {
            console.log(errorResponse);
            if(errorResponse.status == 422) {
                for(errorKey in errorResponse.body) {
                    this.$set(`form.errors.${errorKey}`, errorResponse.body[errorKey]);
                }
            }
        });
    },
    deleteCommission() {
        let config = Object.assign({}, this.modalTemplateData.httpConfig.deleteSpecialCommission, { body: this.form.formData })
        // console.log(config);
        this.$http(config).then(response => {
            // console.log(response);
            if(this.isVueResourceResponseValid(response)) {
                console.log('here');
                this.$emit('sp-commission-remove', response.body.data.deletedSpecialCommission);
                this.handleModalClose();
            }
        }).catch(errorResponse => {
        });
    },
    createCommission() {
        let config = Object.assign({}, this.modalTemplateData.httpConfig.createSpecialCommission, { body: this.form.formData })

        this.$http(config).then(response => {
            if(this.isVueResourceResponseValid(response)) {
                this.$emit('sp-commission-created', response.body.data.newCommission);
                this.handleModalClose();
            }
        }).catch(errorResponse => {
            if(errorResponse.status == 422) {
                for(errorKey in errorResponse.body) {
                    this.$set(`form.errors.${errorKey}`, errorResponse.body[errorKey]);
                }
            }
        });
    },

It's the sp-commission-remove event that is not being emitted if i register a listner for this on the parent, like this - v-on:sp-commission-remove="onDeletingSpecialCommission" if i remove this listener, or even change any character of the custome event name, event emitts fine!!

Are there any limit on how many listeners/events can be emitted in Vue1?

It's driving me nuts. Can someone guide me to the right direction pls?