How to create a button which changes languages with Vue-i18n - vue.js

Question

I have a navbar which need to change between languages with two different buttons. I've used Vue-CLI and Vue-I18N for template syntax but I can't change languages between them. Solutions at documentation didn't helped me so much. My Header.vue , main.js and App.vue are below. I'm waiting for your answers. Thanks.
Header.vue
<template>
<div>
<b-navbar
toggleable="lg"
type="light"
variant="light"
>
<b-navbar-brand href="#">{{ $t('johnDoe') }}</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse
id="nav-collapse"
is-nav
>
<b-navbar-nav>
<b-nav-item href="#">{{ $t('home') }}</b-nav-item>
<b-nav-item href="#">{{ $t('about') }}</b-nav-item>
<b-nav-item href="#">{{ $t('projects') }}</b-nav-item>
<b-nav-item href="#">{{ $t('education') }}</b-nav-item>
<b-nav-item href="#">{{ $t('contact') }}</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
#click="i18n.locale = 'en'"
>{{ $t('english') }}</b-button>
<b-button
size="sm"
class="my-2 my-sm-0"
type="submit"
#click="i18n.locale = 'tr'"
>{{ $t('turkish') }}</b-button>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'HelloI18n'
}
</script>
<i18n>
{
"en": {
"johnDoe": "John Doe",
"home": "Home",
"about": "About Me",
"projects": "Projects",
"education": "Education",
"contact": "Contact",
"english": "English",
"turkish": "Turkish"
},
"tr": {
"johnDoe": "John Doe",
"home": "Anasayfa",
"about": "Hakkımda",
"projects": "Projelerim",
"education": "Eğitim",
"contact": "İletişim",
"english": "İngilizce",
"turkish": "Türkçe"
}
}
</i18n>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<Header></Header>
</div>
</template>
<script>
import Header from "./components/Header.vue";
export default {
name: "app",
components: {
Header,
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
main.js
import '#babel/polyfill'
import 'mutationobserver-shim'
import Vue from "vue";
import './plugins/bootstrap-vue'
import App from "./App.vue";
import i18n from './i18n'
Vue.config.productionTip = false;
new Vue({
i18n,
render: h => h(App)
}).$mount("#app");

Answer 1

You have a typo in the button #click event. i18n is accesible from the template with "$i18n" and no "i18n" so, your button code must be:
<b-button
size="sm"
class="my-2 my-sm-0 btn-info"
type="submit"
#click="$i18n.locale = 'en'"
>{{ $t('english') }}</b-button>