title: Vue-i18n Single File Component Not Working
body: <p>I am trying to implement v-i18n to my project with sfc method. I couldn't make it work. I will not make you confuse with my project, that's why just modified with adding 10-15 lines of code to official v-i18n sfc example. </p>
  
  <p>This is very simply shows my question.</p>
  
  <p>For those who prefer check this very tiny question project on github</p>
  
  <blockquote>
    <p><a href="https://github.com/berkansivri/V-i18n-Question" rel="nofollow noreferrer">https://github.com/berkansivri/V-i18n-Question</a></p>
  </blockquote>
  
  <p><strong>Component1.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;p&gt;{{$t('lang')}}&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;i18n&gt;
  {
    "en":{
      "lang" : "English"
    },
    "es":{
      "lang": "Espanol"
    }
  }
  &lt;/i18n&gt;
  </code></pre>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;label for="locale"&gt;locale&lt;/label&gt;
      &lt;select v-model="locale"&gt;
        &lt;option&gt;en&lt;/option&gt;
        &lt;option&gt;es&lt;/option&gt;
      &lt;/select&gt;
      &lt;p&gt;message: {{ $t('hello') }}&lt;/p&gt;
      &lt;Comp1&gt;&lt;/Comp1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;i18n&gt;
  {
    "en": {
      "hello": "hello"
    },
    "es": {
      "hello": "hola"
    }
  }
  &lt;/i18n&gt;
  
  &lt;script&gt;
  import Comp1 from './components/component1'
  export default {
    components:{
      Comp1
    },
    name: 'App',
    data () { return { locale: 'en' } },
    watch: {
      locale (val) {
        this.$i18n.locale = val
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>So, multiple <code>&lt;i18n&gt;</code>tag in multiple components. I just modified $i18n.locale from App.vue but it did not fire related i18n function <code>$t('lang')</code> on Component1, just modifies <code>$t('hello')</code> on itself.
  How can I make it work?</p>