Кластеры и keep-alive

[dimquea]

Версия библиотеки

2.2.1

Как воспроизвести

Структура моего проекта:

App.vue

...
<router-view
  v-slot="{ Component }"
>
  <keep-alive :include="['MapView']">
    <component :is="Component" />
  </keep-alive>
</router-view>
...

MapView.vue

...
<MapMain
  :objects="objects"
></MapMain>
...

MapMain.vue

...
<yandex-map>
  <yandex-map-clusterer :grid-size="2 ** gridSize" :settings="{maxZoom: 16}" zoom-on-cluster-click>
    <template v-for="(object, id) in objects" :key="id">
      <yandex-map-marker
        :id="id"
        position="top left-center"
        :settings="{
          id: id,
          coordinates: [object.longitude, object.latitude],
          hideOutsideViewport: true,
        }"
      >
        <div
          class="marker"
        >
          <img :src="object.image_preview" />
        </div>
      </yandex-map-marker>
    </template>
    <template #cluster="{ length }">
      <div class="marker cluster">
        <div>
          <span>{{ length }}</span>
        </div>
      </div>
    </template>
  </yandex-map-clusterer>
</yandex-map>
...

Опишите проблему

Если карта находится внутри keep-alive, после деактивации-активации дублируются кластеры, дубли остаются на последней позиции, не интерактивны. Если повторить деактивацию-активацию появляются новые дубли, существующие остаются на старых местах.

Пример на скриншотах

Дополнительная информация

No response

Ответы на вопросы

• Я использую версию 2.x
• Я поискал похожие ошибки и не нашел таковых

[daniluk4000]

Базово у себя воспроизвести не смог

Не могли бы пожалуйста сделать репозиторий, в котором получится воспроизвести проблему?

[hotenov]

Столкнулся с похожей проблемой у себя в проекте, пришлось дополнительно "очищать" список маркеров (объектов) в хуке onActivated() (при активации компонента)

т.е. в вашем случае @dimquea попробуйте добавить в MapView.vue:

<script setup>
import { onActivated } from 'vue';

onActivated(async () => {
  objects.value = null;
  // Ваш код на получение списка объектов (заново)
  // objects.value = await getObjects();
});
</script>

Чуть неудобно, особенно если вы ориентируетесь на длину этого списка и выводите "Нет данных", но и это всё поправимо 😄 (домашнее задание)
но мне помогло =)

[dimquea]

@hotenov, для себя, временно, решил более радикально. Демонтируя компонент карты полностью.

@daniluk4000, про вашу просьбу помню, не удаётся найти время, прошу не закрывать ишью, реп будет