setLocale not working - Githubissues

When I try to set the locale, I'm getting: "Cannot read property '$lang' of null". I'm working on a Laravel/nuxt.js project.

Displaying the translations in the initial set locale is working fine.

Here is my code of the component:

<template>
    <header id="header">
        <b-navbar toggleable="lg" type="dark" variant="" class="container">
            <b-navbar-brand href="/">FTS</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="#">Link</b-nav-item>
                    <b-nav-item href="#" disabled>Disabled</b-nav-item>
                </b-navbar-nav>

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">
                    <b-nav-item-dropdown :text="$t('common.language')" right>
                        <b-dropdown-item @click="this.$lang.setLocale('en');">EN</b-dropdown-item>
                        <b-dropdown-item @click="this.$lang.setLocale('de');">DE</b-dropdown-item>
                    </b-nav-item-dropdown>

                    <b-nav-item-dropdown right>
                        <!-- Using 'button-content' slot -->
                        <template v-slot:button-content>
                            <em>User</em>
                        </template>
                        <b-dropdown-item href="#">Profile</b-dropdown-item>
                        <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </header>
</template>

<script>
export default {
    data: () => {
        return {

        };
    }
}
</script>

eli5-amsterdam / vue-lang-js

setLocale not working #3