Передача данных между 2 различными компонентами с помощью emit

Question

Я новичок в vueJS. Я использую vue2. У меня есть 3 компонента catalogue.vue, sellingPrice.vue и profit.vue. Catalogue.vue представляет собой список всех продуктов с себестоимостью, продажной ценой и процентом прибыли. Цена продажи и процент прибыли являются отдельными компонентами внутри компонентов каталога. Сценарий заключается в том, что при редактировании цены продажи следует автоматически рассчитывать прибыль, а при вводе прибыли вручную следует автоматически рассчитывать цену продажи. У меня проблемы с передачей процента прибыли в каталог.

Я пытался использовать $ emit в прибыли и $ on в каталоге. Я не вижу, что это работает. Может ли кто-нибудь помочь мне понять это.

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);
}

Также попытался использовать this. $ Внутри созданного. Кажется, это тоже не работает.