[Vuejs]-Language Switcher doesn't apply the new locale

This worked for me, using vue-select and availableLocales of Nuxt-$i18n, hope it helps:

<template>
  <div>
    <client-only>
     <b-navbar>
       <div class="container">
      <b-navbar-brand
        class="navbar-brand-custom mr-2"
        :to="localePath('index')"
        :title="title">

      <div class="d-flex flex-row order-2 order-lg-3 ml-auto text-capitalize">
        <b-navbar-nav class="d-flex flex-row">
          <!-- Language menu -->
          <v-select
            v-model="selected"
            v-for="(lang, index) in availableLocales"
            :key="index"
            :value="lang.code"
            :searchable="false"
            @input="onChange"
            class="vue-select-custom"
          ></v-select> 
          <!-- Navbar menu -->
          <b-nav-item-dropdown
            id="menu-links"
            right
            no-caret
            role="manu"
            class="ml-0"
            menu-class="animated fadeIn text-right menu-links rounded-0"
          >
            <span class="dropdown-menu-arrow"></span>

            <template
              v-slot:button-content
              style="height:42px"
            >
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </div>
    </div>
  </b-navbar>
  </client-only>

<script>
  export default {
   data() {
     return {
       selected: this.$i18n.locale
     }
   },
   computed: {
    availableLocales() {
     return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
   },
 },
 .....
 methods: {
  onChange(locale) {
    var language = locale.toLocaleLowerCase();
    this.$i18n.setLocaleCookie(language)
    this.$router.replace(this.switchLocalePath(language));
  },
  ....
 }
}

this is due to alwaysRedirect: true, set it to false