<p>I'm pretty new to Vue3, I'm building a small starter portal using Vue, and in an "App.vue" file called <code>const ProgressStage = ref(0)</code> Global state and render specific components based on that state. </p> <p>I also had to emit the passed handler to change the status of the progressStage</p> <p>View the code here: </p> <pre class="brush:php;toolbar:false;"><script setup> import {ref} from 'vue'; import ComponentA from 'components/componentA.vue' (moc components) import Component B from 'components/componentB.vue' const progressStage = ref(0) const data = ref({}) function handleNavigation(newVal){ progressStage = newVal } function handleClientDataAdd(newData){ const newData = {...data.value,newData} data.value = newData; } </script> <template> <ComponentA v-show:progressStage === 0 /> <ComponentB @handle-page-nav="handleNavigation" @handle-client-data="handleClientDataAdd" v-show:progressStage === 1 /> </template></pre> <p>Inside my ComponentB -> Also, the wrong one is being called: <strong>In <ComponentB onClientDataAdd=fn onHandlePageNav=fn In the application. </strong></p> <pre class="brush:php;toolbar:false;"><script setup> import {ref} from 'vue' const emits = defineEmits(['handlePageNav','clientDataAdd'] const data = ref({ name:'' }) (mock object) </script <template> <input v-model="data.name" /></pre> <p>I have multiple other components that also use state to install themselves dynamically, but ComponentB seems to keep throwing the above warning (on every keystroke in the input)</p> <p><strong>Hope for some help</strong></p>