title: Vue.js and vue-i18n, json from $ajax to object literals
body: <p>I am using Vue.js with the plugin <a href="https://github.com/kazupon/vue-i18n" rel="nofollow">vue-i18n</a> for internationalization purposes. It accepts a <code>lang</code> and a <code>locales</code> parameters, the later being a list of property names and associated values (<code>object literals</code>). As such, referencing an <code>object literals</code> list, either directly in the <code>locales</code> option or stored in a local variable works as expected, such as in the example below:</p>
  
  <pre><code>var locales = {
      "en": {
          "menu": {
              "about": "about",
              "news": "news",
              "contact": "contact"
          }
      },
      "fr": {
          "menu": {
              "about": "à propos",
              "news": "actualités",
              "contact": "contacter"
          }
      }
  }
  
  Vue.use(VueI18n, {
      lang: 'fr',
      locales: locales
  });
  </code></pre>
  
  <p>Please note that despite the formatting (the double quotes all the way through the list), the above is not a <code>json array</code>, but an <code>object literals</code> list with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_Literals" rel="nofollow"><code>string literals</code>for the name of the properties</a>.</p>
  
  <p>Now, what I've been struggling about is to relying on a Json file instead of declaring an <code>object literals</code> list directly in my script. For instance, I've tried an ajax request, such as this:</p>
  
  <pre><code>Vue.use(VueI18n, {
      lang: 'fr',
      locales: $.ajax({
                   url: "../resources/i18n/locales.json",
                   dataType: "json",
                   type: "GET",
                   success: function(data) {
                       console.log(data);
                   }
               })
  });
  </code></pre>
  
  <p>The <code>url</code> string is pointing at a <code>locales.json</code> file with the exact same data and formatting as above, with the only difference that it is written inside square brackets. </p>
  
  <p>I haven't had much success with this approach though, which in my mind doesn't make a lot of sense since <code>data</code> seems to be correctly parsed. This is what I get in the console:</p>
  
  <pre><code>Array[1]
    0: Object
      en: Object
        menu: Object
          about: "about"
          contact: "contact"
          news: "news"
      fr: Object
        menu: Object
          about: "à propos"
          contact: "contacter"
          news: "actualités"
  </code></pre>
  
  <p>I wonder what I'm doing wrong?</p>