vue3 array value problem between components

Question

i have a strange problem with arrays in vue3

When loading the components, a start array is transferred, in the components the values ​​are taken over with a watcher if the start array changes. that works wonderfully. the whole thing is a little game, the user moves a cone on a certain route.

I switch to another component by changing a page number. the component with the game should actually be completely from the dom, I don't see anything in the tree either.

<transition name="fadepage" mode="out-in" >
    <div v-if="getPage()==3"> 
        <VueGameIntro  :content="content" :level="level" :kontrastswitch="kontrastSwitch" :typoswitch="typoSwitch" :levelcolor="levelColor" @mqttMessage="changeMqttMessage"></VueGameIntro> 
    </div> 
  </transition>


  <transition name="fadepage" mode="out-in" >
    <div v-if="getPage()==4"> 
        <VueGame   :content="content" :level="level" :playerlist="playerList" :startpointlist="startPointList" :levelendstate="levelEndState" :activeplayerlist="activePlayerList" :kegelmoved="kegelMoved" :kontrastswitch="kontrastSwitch" :id="id" @mqttMessage="changeMqttMessage" @changeCurrPoint="changeCurrPoint"></VueGame> 
    </div> 
  </transition>


  <transition name="fadepage" mode="out-in">
    <div v-if="getPage()==5"> 
        <VueGameOutro  :content="content" :level="level" :levelendstate="levelEndState" :kontrastswitch="kontrastSwitch" :typoswitch="typoSwitch" @mqttMessage="changeMqttMessage"></VueGameOutro> 
    </div> 

ok, when the first level has been played it changes to another component VueGameOutro, then it goes back to the actual game components with a new level. Suddenly I have the feeling that this array exists twice.

in the console i see different values ​​than in the output on the screen: {{ currPointList }} shows something different than this.currPointList. in the vue dev plugin, however, are the values ​​​​as well as the screen output. but the component definitely has a different starting point than the one in the currPointList.

the value in the console seems to have been the latest from the previous level.

Is that possible? how can I be sure that a component is completely gone?

are there arrays that have different values ​​for string or number?

########################################################## edited

that's the console output: currPointList unmounted 25,0,0,0, currPointList mounted 8,0,0,0, GAME_MOVE currPointList #move,1,3,1 25,0,0,0, currPointList before move 25,0,0,0, currPointList move point updated 3,0,0,0,

as you can see, the 25 is in front of the unmount, then the component is reloaded and gets the 8 once via a property form the parent comp

then a move command arrives via websocket, an mqtt component receives the message and sends it to the game via MITT emitter. there's no other place to change currPointList. the first value jumps back to 25.

Answer 1

the problem occurred because the emitter.on("eventname" ...) was not deleted when removing the components. I also changed the emitter.on to an arrow function.