title: How to use vue-i18n translate function in script part of component
body: <p>I'm using laravel-vue-i18n-generator package to handle text translation in vuejs component in my laravel project. I've set up app.js like below:</p>
  
  <pre class="lang-js prettyprint-override"><code>import VueInternationalization from 'vue-i18n';
  import Locale from './vue-i18n-locales.generated';
  
  Vue.use(VueInternationalization);
  
  const lang = 'fa';
  
  const i18n = new VueInternationalization({
      locale: lang,
      messages: Locale
  });
  
  const app = new Vue({
      el: '#app',
      i18n,
  });
  
  </code></pre>
  
  <p>And in component:</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;a href="#" class="tip" title="" :title="$t('component.delete.title')" @click.prevent="deleteAction"&gt;
          &lt;i :class="icon"&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import swal from 'sweetalert';
      import axios from 'axios';
  
      export default {
          inject: ['$i18n'],
          props:{
              endpoint: {
                  type: String,
                  required: true,
              },
              icon: {
                  type: String,
                  default: 'fa fa-trash'
              },
              message: {
                  type: String,
                  default:  this.$i18n.t('component.delete.are_you_sure'),
              },
              confirm: {
                  type: String,
                  default:  this.$i18n.t('component.delete.confirm'),
              },
              cancel: {
                  type: String,
                  default:  this.$i18n.t('component.delete.cancel'),
              },
              success: {
                  type: String,
                  default:  this.$i18n.t('component.delete.success'),
              },
              failed: {
                  type: String,
                  default:  this.$i18n.t('component.delete.failed'),
              },
          },
          mounted() {
              console.log(this);
          },
          methods:{
              deleteAction(){
                  const vm = this;
                  swal({
                      text: this.message,
                      buttons: {
                          catch: {
                              text: this.confirm,
                              value: "delete",
                          },
                          cancel: this.cancel
                      },
                      dangerMode: true
                  }).then(name =&gt; {
                      if (!name) return false;
  
                      axios.delete(vm.endpoint)
                          .then(function (response) {
                              swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() =&gt; {
                                  location.reload();
                              });
                          })
                          .catch(function (error) {
                              swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
                          });
                  });
              }
          }
  
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Fortunately <code>$t('component.delete.title')</code> works correctly on template part, but in script part, I've got this error:</p>
  
  <p>Uncaught TypeError: Cannot read property 't' of undefined</p>
  
  <p>Where do I go wrong?</p>