Dropdown Replaced by SVG Image in Vue.js Teleport

General
1

I'm working on a Vue.js application where I want to render a dropdown in the app bar title using the Teleport component. However, the dropdown appears for a fraction of a second upon page load and is then replaced by an SVG image.

Here’s the code for the two Teleport components I'm using:

<template>
  <div>
    <div class="msg">
      <Teleport v-if="mounted" to="#app-bar-title">
        <v-form style="width: 200px">
          <v-autocomplete :items="topologies.map(topology => topology.name)" label="Select Topology"
            placeholder="Search for the topologies" clearable chips variant="underlined" closable-chips
            v-model="selectedTopology" style="max-width: 200px;">
          </v-autocomplete>
        </v-form>
      </Teleport>
      <Teleport v-if="mounted" to="#app-bar-title">
        <v-avatar>
          <v-img height="32px" src="/trace.svg"></v-img>
        </v-avatar>
      </Teleport>
    </div>
  </div>
</template>

I suspect there might be a conflict between the two Teleport components. How can I ensure that both elements (dropdown and image) can be displayed as needed?

2

If you put both of them inside the same <Teleport /> element, then they will render next to each other, rather than one replacing the other.