JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<script src="https://rawgit.com/kazupon/vue-i18n/master/dist/vue-i18n.min.js"></script>
<script src="vue-resource"></script>
<script src="https://cdn.rawgit.com/pagekit/vue-resource/master/dist/vue-resource.js"></script>
<div id="app">
{{ $t("foo") }}
</div>

JavaScript

// set lang
Vue.config.lang = 'en';
Vue.config.missingHandler = function (lang, missingPhrase) {
	console.log("missing " + missingPhrase);
};


let url = 'https://graphics.afpforum.com/data/TEST_DATA_VUEJS_TRANSLATE/jsfiddle.json'
Vue.http.get(url).then(
  (response) => {
    let json = response.body
    json = formatData(json)
    Object.keys(json).forEach(function (lang) {
      console.log(lang, json[lang]);
      Vue.locale(lang, json[lang])
    })
    
    // Have to set another lang to get the translation showing up, otherwise, it displays the keypath "foo"
//    Vue.config.lang = 'fr';
    Vue.config.lang = 'en';
  },
  (response) => {
    console.warn('REJECTED')
  }
)


// Helper to get formatted data with following structure
// {
//   en: {
//     foo: 'foo content',
//     bar: 'bar content'
//   },
//   fr: {
//     foo: 'contenu de foo',
//     bar: 'contenu de bar'
//   }
// }
function formatData (raw) {
  let locales = {}
  Object.keys(raw).forEach(function (index) {
    let entry = Object.entries(raw[index])
    let key = entry.find( i => i[0] == 'key')[1]
    entry.map( (item) => {
      if(item[0] !== 'key' && item[0] !== 'title' && locales[item[0]] === undefined){
        locales[item[0]] = {}
      }
      if(item[0] !== 'key' && item[0] !== 'title'){
        locales[item[0]][key] = item[1]
      }
    })
  })
  
  return locales
}


new Vue({
    el: '#app',
    data: {
    },
    mounted: function () {
    	
    },
    methods: {
    }
})