Internationalization not working in Vue?

Question

Vue.js

I've enabled internationalization in my project (I chose to use vue-i18n lib)
on @click.prevent="localizee(key)" the language switches to dropdown but the localizee method doesn't work
template:

<div>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{ locales[locale]}}
        </a>
        <div class="dropdown-menu">
            <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
                @click.prevent="localizee(key)">
                {{ value }}
            </a>
        </div>
    </li>
</div>

Answer 1

locales: ['ru', 'en'],
locale: 'ru',

Doesn't bother you? There is an array of languages, there is a current language. And you work with the current language not as with the language, but as with its index - both when outputting to the template and when setting the language. What is schizophrenia?