Vue-i18n: $t not displaying text, Value of key 'messages.hello' is not a string!

[T0miii]

vue & vue-i18n version
Vue: 2.5.13
Vue-i18n: 7.4.0

Steps to reproduce
Standard behaviour.

What is Expected?
$t should show the translated text.

What is actually happening?
I get this warning in the console and also $t just returns the translation Key
Value of key 'messages.hello' is not a string!

I know this was asked many times but non of the answers seems to help me out.
Also i am not using Vue route.

import VueI18n from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';


Vue.use(VueI18n);


const i18n = new VueI18n({
    locale: 'de', // set locale
    messages: {
        en: { hello: 'EN Text'},
        de: { hello: 'Some Gemran Text' },
    },
    silentTranslationWarn: false
});

new Vue({

    el: '#prm',

    mixins: [BreadcrumbMixin ],

    i18n,

    data() {
        return {
            breadcrumbs: []
        };
    },
);

[T0miii]

nvm, closing this.
messages is a param, i cant call $t('messages.hello') and expect the text to show up.

its: $t('hello'). And if i pass the Locales. its

const i18n = new VueI18n({
    locale: 'de', // set locale
    messages: Locales,
    silentTranslationWarn: false
});

Thx for the great tool.