Проблема с отоброжением при смене языка

проблема в следующем есть выпадающее окно для выбора языка сайта, при изменении всё флаги при выборе ведут себя так как требуется, но при выборе французского он в диапазона 1021-1199 падает вниз, пробовал решить через @meadia но тогда эти изменения применяется уже к тем флагам которые вели себя коректно и они соответственно лезут вверх. Подскажите в чем причина что вниз падает только один флаг, и как это исправить?

<template>
  <div
    class="country_changer clickable-item"
    :class="{ opened: isMenuOpened }"
  >
    <div ref="ignoreElRef" class="country_changer_icon main-navigation-button" @click.stop.prevent="handleClick">
      <nuxt-img
        preload
        :src="`/images/main/flags/${ currentLocation?.countryCode ? currentLocation.countryCode.toLowerCase() : 'de' }.svg`"
        width="52"
        height="52"
        :title="`${currentLocation?.countryName}`"
        :alt="`${currentLocation?.countryName}`"
      />
    </div>
    <div ref="countriesList" class="countries">
      <div class="container">
        <ul class="row">
          <template v-for="item in localeList?.data">
            <li v-if="item.location_enabled" :key="item.location_id" class="col-md-3 col-sm6 col-xs-6">
              <a
                href="#"
                :title="`${item.country.nm_country_name} / ${item.language.nm_language_name}`"
                @click.prevent="onLocationChange(item)"
              >
                <nuxt-img
                  preload
                  :src="`/images/main/flags/${item.location_country}.svg`"
                  width="40"
                  height="40"
                  :title="`${item.country.nm_country_name} - ${item.language.nm_language_name}`"
                  :alt="`${item.country.nm_country_name} / ${item.language.nm_language_name}`"
                  class="d-inline"
                />
                <span><strong>{{ item.country.nm_country_name }}</strong><br>{{ item.language.nm_language_name }}</span>
                <div class="clear" />
              </a>
            </li>
          </template>
        </ul>
        <div class="clear" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { toRef, useContext } from '@nuxtjs/composition-api'
import Vue, { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import useError from '~/compositions/useError'
import useLocale from '~/compositions/useLocale'
import { LocationDto } from '~/types/locales'
import useCart from '~/compositions/useCart'

export default Vue.extend({
  setup () {
    const { app } = useContext()
    const { state, getLocaleList, setCurrentLocation } = useLocale()
    const { changeCurrency } = useCart()
    const { data: localeList, error, isValidating, mutate } = getLocaleList()

    const isMenuOpened = ref(false)
    const ignoreElRef = ref()
    const onLocationChange = async (location: LocationDto) => {
      isMenuOpened.value = false
      setCurrentLocation({
        countryCode: location.location_country,
        countryName: `${location.country.nm_country_name} / ${location.language.nm_language_name}`,
        currentCurrency: location.location_currency,
        currentLanguage: location.location_language,
        currentCurrencyFormat: `${location.location_language}-${location.location_country.toUpperCase()}`
      })
      try {
        await changeCurrency(location.location_currency, false)
      } catch (error) {
        useError().handleError(error, (errors) => {
          Vue.$toast.error(errors.currency_id[0])
        })
      }
      if (app.router) {
        const currentRoute = app.router.currentRoute.fullPath
        const currentI18nLocale = app.i18n.locale
        if (currentRoute.startsWith(`/${currentI18nLocale}`)) {
          const newPath = currentRoute?.replace(`/${currentI18nLocale}`, `/${location.location_language}`)
          app.router.push(newPath)
        } else {
          app.router.push(`/${location.location_language}${currentRoute}`)
        }
      }
    }

    const countriesList = ref(null)
    onClickOutside(countriesList, () => {
      isMenuOpened.value = false
    }, { ignore: [ignoreElRef, countriesList] })
    const handleClick = () => {
      isMenuOpened.value = !isMenuOpened.value
    }
    return {
      countriesList,
      currentLocation: toRef(state, 'currentLocation'),
      localeList,
      isValidating,
      error,
      mutate,
      onLocationChange,
      isMenuOpened,
      ignoreElRef,
      handleClick
    }
  }
})
</script>

<style scoped>
.col-xs-6 {
  width: 50%;
}
</style>

<style scoped>
#top_menu .country_changer div.countries {
    position: absolute;
    right: 0;
    left: 0;
    background: #fff;
    height: 0;
    overflow: hidden;
    padding: 0 20px;
    top: 118px;
}

#top_menu .country_changer.opened div.countries {
    height: auto;
    padding: 20px 20px;
    transition: all 0.2s ease-out;
    border-bottom: 1px solid #ebebeb;
    box-shadow: 0 3px 4px 0 rgb(0 0 0 / 10%);
    z-index: 2;
}

#top_menu .country_changer {
  /* 3 */
  float: right;
  
}

#main_navigation .country_changer_icon {
  /* 2 */
  position: relative;
  bottom: 75px;
 
}
#navigation.navig-fixed .country_changer {
  display: none;
}

#top_menu .country_changer .country_changer_icon img {
/* 1 */
  width: auto;
  height: 100%;
  transform: scaleX(.888) scaleY(1.111);
  
}

#top_menu .country_changer ul li {
  text-align: left;
  overflow: hidden;
  border: 1px solid transparent;
}
#top_menu .country_changer ul li:hover {
  border: 1px solid #f18a00;
  border-radius: 2px;
  background-color: #F6F6F6;
}

#top_menu .country_changer ul li a {
    padding: 14px 0;
    min-height: 20px;
    color: #000;
}
#top_menu .country_changer li a {
    display: block;
}

#top_menu .country_changer ul li a img {
    margin-right: 15px;
    float: left;
    width: 40px;
}

#top_menu .country_changer ul li a span {
    float: left;
}


@media (max-width: 991px) {
  #main_navigation .country_changer_icon {
    bottom: 2px;
  }

  #top_menu .country_changer div.countries {
    top: 192px;
  }
}

@media (max-width: 770px){
  #top_menu .country_changer ul li, #top_menu .countries .container {
    padding: 0;
  }
}
@media (max-width: 650px) {
  #top_menu .country_changer div.countries {
    top: 45px;
  }
  #main_navigation .country_changer_icon {
    background-color: #ffffff00;
    position: absolute;
    min-width: 50px;
    top: 0px;
    right: 170px;
    height: 50px;
  }
}

@media screen and (max-width: 500px){
  #navigation .country_changer .country_changer_icon {
    top: 0px
  }

  #navigation.navig-fixed .country_changer .country_changer_icon
  {
    top: -45px;
  }
  #navigation.navig-fixed .country_changer {
    display: initial;
  }
  #top_menu .country_changer ul li a {
    padding: 7px 0;
  }
}
@media (max-width: 400px) {
  #main_navigation .country_changer_icon {
    width: 40px;
    height: 40px;
    top: 5px;
  }
}
@media screen and (max-width: 400px) {

  #top_registration .account .login.main-navigation-button,
  #main_navigation .main-navigation-button:not(.website_search_icon) {
    width: 40px;
    height: 40px;
    margin: 15px 0 2.5px 2.5px;
  }
  #main_navigation .country_changer  .country_changer_icon {
    top: 0px;
    right: 125px;
  }
  #website_search .website_search_input input{
    padding-right: 40px
  }
}
</style>