Vue: emit to view component works only the first time - vue.js

Question

I have a view which has a recursive component A, which in turn embeds a component B. In component B changes are made, which should be passed via emit to component A and these should be passed directly to the view.
This "chain" works, but only the first time:
Komponent B:
// Emit in component B
function emitToParent() {
console.log("component B: ", props.current.id);
emits('changeParentReactiveData', props.current.id, data);
}
Komponent A:
// Receiving the emit in Komponent A and passing it to the view
<component-b #change-parent-reactive-data="emitToParent" />
function emitToParent(id, data) {
console.log("component A: ", id);
emits("changeParentReactiveData", id, data);
}
View:
// Receiving the emit in the View
<component-a #change-parent-reactive-data="setReactive" />
function setReactive(id, data) {
console.log("view: ", id);
}
Outcome console.log:
component B: 262194
component A: 262194
view: 262194
component B: 262187
component A: 262187
component B: 262193
component A: 262193
So as you can see, the last emit to the view component happens only the first time. Why? Does anyone have an idea?

Answer 1

Your code should work, As I am not able to setup the Vue 3 in the below code snippet. I am demoing it using Vue 2 setup. Please have a look and try to find out the root cause of the issue you are facing.
Every time you will click on Click Me text in the inner child component. It is emitting the events properly.
Vue.component('childComponent', {
template: `<div class="emit-time" #click="click()">Click me (Component A)</div>`,
methods: {
click() {
console.log('component A');
this.$emit('clickup', 'a click');
}
}
});
Vue.component('ParentComponent', {
data() {
return {
message: null
}
},
template: `<div><p v-text="message"></p><child-component #clickup="localMethod"></child-component></div>`,
methods: {
localMethod() {
console.log('component B');
this.message = 'Component B invoked and emitted the event to the parent';
this.$emit('clickup', 'a click');
}
}
});
new Vue({
el: "#app",
data: {
message: null
},
methods: {
localMethod() {
console.log('Root component');
this.message = 'Top most parent invoked'
}
}
});
#app {
padding : 20px;
}
div {
padding : 10px;
border : 1px dashed black;
}
div ~ div {
margin-top : 10px;
border-color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-text="message"></p>
<parent-component #clickup="localMethod"></parent-component>
</div>

Answer 2

Your code should work as it is. I have set up a demo here and it is working just fine. Maybe you can match your code with this-
View.vue
<script setup>
import Comp1 from './Comp1.vue'
const setReactive = (payload) => {
console.log('View', payload);
};
</script>
<template>
<v-app>
<v-main>
<Comp1 #change-parent-reactive-data="setReactive" />
</v-main>
</v-app>
</template>
Component 1
<script setup>
import Comp2 from './Comp2.vue'
const emits = defineEmits(['changeParentReactiveData'])
const emitToParent = (payload) => {
console.log('Component A', payload);
emits('changeParentReactiveData', payload);
};
</script>
<template>
<Comp2 #change-parent-reactive-data="emitToParent" :some-prop="262194"></Comp2>
</template>
Component 2
<script setup>
const props = defineProps(['someProp']);
const emits = defineEmits(['changeParentReactiveData'])
const emitToParent = () => {
console.log('Component B', props.someProp);
emits('changeParentReactiveData', props.someProp);
};
</script>
<template>
<v-btn #click="emitToParent()">
click
</v-btn>
</template>

Answer 3

Try implementing a global event bus to pass values from component to component.
Here's a blog to explain how:
https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/