title: Vue-i18n change locale not updating everything
body: <p>i'm new to vue-i18n, seams great, but have some challenge getting it to work probably.</p>
  
  <p>All template translations are updated as expected when changing locale, but when </p>
  
  <p>script</p>
  
  <pre><code>data() {
    return {
      locales: {
        en: this.$i18n.t('topnav.lang.english'),
        da: this.$i18n.t('topnav.lang.danish'),
        sw: this.$i18n.t('topnav.lang.swedish'),
        no: this.$i18n.t('topnav.lang.norwegian'),
      }
    }
  },
  </code></pre>
  
  <p>template</p>
  
  <p>WORKING</p>
  
  <pre><code>{{$t('topnav.lang.english')}}
  </code></pre>
  
  <p>NOT WORKING</p>
  
  <pre><code>&lt;a class="dropdown-item"&gt;{{locales.en}}&lt;/a&gt;
  </code></pre>
  
  <p>NOT WORKING</p>
  
  <pre><code>&lt;a class="dropdown-item" @click="changeLocale(key)" v-for="(value, key) in locales"&gt;{{value}}&lt;/a&gt;
  </code></pre>
  
  <p>i have tried a lot of things, eg. lazyload the languages files and so on, but with no luck.</p>