title: Dynamically changing the language of columns labels in VueJS
body: <p>I implemented a multilanguage support for the website. Using VueJS and VueI18n. There are 3 pages - home, registers and messages. The problem is in messages, where there is a dynamically rendered table - vue-good-table. While being on this page(with the table) if I click on the buttons for changing languages, everywhere the languages is being changed dynamically, but not the labels and placeholders of the table. If I go to one of the other pages and comeback to the table, the labels and placeholders are updated correctly. Can you help me make it change while I am on the same page?</p>
  
  <p>I was wondering if beforeMount() would help in this situation?</p>
  
  <p><strong><em>main.js</em></strong></p>
  
  <pre><code>import VueI18n from 'vue-i18n'
  import {messages} from './locales/bg_en_messages'
  
  Vue.use(VueI18n)
  
  const i18n = new VueI18n({
    locale: 'bg', // set locale
    fallbackLocale: 'bg',
    messages // set locale messages
  });
  
  Vue.prototype.$locale = {
    change (lang) {
      i18n.locale = lang
    },
    current () {
      return i18n.locale
    }
  };
  </code></pre>
  
  <p><strong><em>Messages.vue:</em></strong></p>
  
  <pre><code>&lt;vue-good-table
    :columns="columns"
    :rows="items"
    :paginate="true"
    :lineNumbers="true"&gt;
  &lt;/vue-good-table&gt;
  
  &lt;script type="text/javascript"&gt;
    export default {
      data(){
        return {
          items:[],
          columns: [
            {
              label: this.$t("columns.date"),
              field: 'changeddate',
              type: 'String',
              filterable: true,
              placeholder: this.$t("columns.date")
            },
            {
              label: this.$t("columns.userChange"),
              field: 'userchange',
              type: 'String',
              filterable: true,
              placeholder: this.$t("columns.userChange")
            }
          ]
        }
      }
    }
  </code></pre>
  
  <p><strong><em>App.vue</em></strong></p>
  
  <pre><code>&lt;div style="padding: 10px; width: 99%;"&gt;
    &lt;ui-button @click="changeLang('bg')"&gt;
      &lt;img src="../src/assets/images/skin/Flag1.png" v-bind:alt="home" height="15" width="25"/&gt;
  &lt;/ui-button&gt;
    &lt;ui-button @click="changeLang('en')"&gt;
      &lt;img src="../src/assets/images/skin/Flag2.png" v-bind:alt="home" height="15" width="25"/&gt;
    &lt;/ui-button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      export default {
        name: 'Localization',
        methods: {
          changeLang: function(newLang){
            this.$locale.change(newLang)
          }
        }
      }
  &lt;/script&gt;
  </code></pre>