JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<ul>
    <li><a href="#" v-on="click: setLocale('en')">en</a></li>
    <li><a href="#" v-on="click: setLocale('de')">de</a></li>
    <li><a href="#" v-on="click: setLocale('fr')">fr</a></li>
</ul>

{{ t('root test') }}

<div id="child1"></div>

<div id="child2"></div>

JavaScript

Vue.config.debug = true;

var i18nvm = new Vue({
    data: {
        translator: null
    }
});

Vue.prototype.t = function(string, variables) {
    translator = i18nvm.$data.translator;
    if (!translator) {
        return 'untranslated: ' + string;
    }
    return translator.locale + ': ' + string;
};

Vue.prototype.setLocale = function(locale) {
    var translator = {
        locale: locale
    };
    i18nvm.translator = translator;
};

new Vue({
    el: 'body',
    data: {
    },
    methods: {
    }
})

new Vue({
    el: '#child1',
    template: "<div>{{ $t('test1') }}</div>",
    data: {
    },
    methods: {
    }
})


new Vue({
    el: '#child2',
    template: "<div>{{ t('test2') }}</div>",
    data: {
    },
    methods: {
    }
})