In Vue3 (version 3.4.21), I have an “single” component in the middle of a list and I want to set a special key value for this element so that transitions work as expected.

<transition-group>
<template v-for="element in listOfElements" :key="element.id">
  <list-item-component />
  <single-component v-if="element.id == someVariable" key="uniqueText" />
</template>
</transition-group>

<single-component /> will be rendered only once because of the v-if condition.

In the example above, <single-component /> gets the key "{element.id}uniqueText" which is fine to be unique in the list yet when someVariable changes, the key changes too and the node is re-created as a new one. One of the side effect is that transitions are ugly in this context as two nodes are visible during the transition.

How can I override the default mechanism of Vue to have a immutable key in this context or how can I restructure my template so that the position of <single-component> slides smoothly amongs the <list-item-component /> depending on the value of someVariable?

Thanks