Почему Vue не правильно фиксит Hydration mismatch?

Question

[LionG]

Есть города с ценами, сортирую их по цене + опускаю 0 в конец.
SSR и Chrome выдают одинаковый результат, все ок.
А вот в FireFox порядок городов с 0 ценами получается другой, проблема в разных алгоритмах сортировки (https://qna.habr.com/q/684389).
Неправильную сортировку элементов с нулевыми ценами можно поправить "стабильной сортировкой":

const stableSort = (arr, compare) => arr
  .map((item, index) => ({item, index}))
  .sort((a, b) => compare(a.item, b.item) || a.index - b.index)
  .map(({item}) => item)

В то время когда FireFox выдал другую комбинацию городов Vue почему то увидел изменения только заголовка и подменил только заголовки (цена ссылка и картинка остались). Почему Vue не перендерил полностью оба элемента, а только h3 ?

Код максимально прост:

<div>
  <a
    v-for="(city, city_index) in citiesSorted"
    :key="city_index"
    :href="city.link"
  >
    <img
      :src="city.logo"
      :alt="city.name"
    />
    <h3>{{ city.name }}</h3>
    <span>{{ city.price }}</span>
  </a>
</div>