Conditionally rendering the same component does not trigger mounted() hook

Question

I'm pretty new to Vue so please correct me if my thinking process is wrong. I'm trying to conditionally render a component like this:

<div>
  <Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1"></Map>
  <Map v-else mapSrc="src2.jpg" :idList="idList2" :data="dataVariable2"></Map>
</div>

My goal here is to render the same component with different props depending on the v-if state. So when bool is true it should render the first component, and when i toggle bool to be false, it should render the second option. The props seems to be changing correctly, but when i toggle the bool state it does not seem to run the mounted() hook again, which is an indication that component1 does not seem to dismount, it just switches out the props basically.

What I want is that when bool is false, it should render a fresh version of that whole component instance, and be isolated of what previously was going on in component 1.

How can I achieve this?

Answer 1

according to Linus Borg's answer here, You should add a unique key attribute to both of them.