Pass data between 2 different components using emit

Question

I am new to vueJS.I am using vue2. I have 3 components catalogue.vue,sellingPrice.vue and profit.vue. Catalogue.vue is a list of all products with a cost price,selling price and a profit percentage. Selling price and profit percentage are individual components inside the catalogue components.Scenario is, when selling price is edited, profit should be automatically calculated and when profit is input manually selling price should be automatically calculated. I am having difficulty passing the profit percentage to catalogue.

I tried using $emit in profit and $on in catalogue. I dont see that working. Can someone help me figure this out.

Profit.vue.

<template id="profit">
    <div>
        <div v-if="!isActive" @click="toggle()">
                <span>{{ calculateProfit }}%</span>
        </div>
        <div v-if="isActive" class="control has-icons-right">
            <input v-model="calculateProfit" class="input is-medium" type="text" placeholder="Text input">
            <div class="icon-container is-pulled-right">
            <span class="icon is-medium is-right edit-success" @click="emitProfitPercentage()">
                <i class="fas fa-check is-success" />
            </span>
            <span class="icon is-medium is-right edit-cancel" @click="toggle()">
                <i class="fas fa-times" />

            </span>
            </div>
        </div>
    </div>
</template>

computed:{
    calculateProfit:{
        get(){
            let profPercentage = 0;
            if(this.product.profit > 0){
                profPercentage = this.product.profit;
            }else{
                let  profitPercentage = 0;
                let profitAmt = 0;
                if(this.product.sellingCost === 0){
                    profitPercentage = 0;
                }else if(this.product.calculatedLandedPrice > 0 && this.product.sellingCost > 0){
                    profitAmt = this.product.sellingCost - this.product.calculatedLandedPrice;
                    profitPercentage =  Math.round((profitAmt/this.product.cost)*100);
                }else if(this.product.calculatedLandedPrice === 0 && this.product.sellingCost > 0){
                    profitAmt = this.product.sellingCost - this.product.cost;
                    profitPercentage =  Math.round((profitAmt/this.product.cost)*100);
                }
                profPercentage= profitPercentage;
            }
            return profPercentage;

        }, 
        set(newValue){
            this.product.profit = newValue;
        }
    },

},
methods:{
    toggle() {
        this.isActive = !this.isActive;
    },
    emitProfitPercentage(){
        console.log('calculateProfit:', this.product.profit);
        this.$emit('update-profit',this.product.profit);
        this.toggle();
    }
}

Catalogue.vue:

updateSellingPrice(profit){
console.log('profit:', profit);
}

Also tried using this.$on inside created. That doesn't seem to work as well.