Realtime i18n Vuejs doesn't refresh text in dropdown

Question

I need immediate update when I change language by i18n in select

html

<base-dropdown-item
        v-for="(f, i) in filters"
        :key="`dropdown-${i}`"
        @click="filter = f"
        >{{ f.label }}</base-dropdown-item

typescript

data() {
return {
  q: '',
  filter: { label: this.$t('myTasks.filter.Incomplete'), value: 2 },
  filters: [
    { label: this.$t('myTasks.filter.Incomplete'), value: 2 },
    { label: this.$t('myTasks.filter.done'), value: 3 },
    { label: this.$t('myTasks.filter.all'), value: 1 }
  ],

  qTasks: []
};
},
watch: {
'filter.value'() {
  this.$emit('filter', this.filter);
},
};

I need to change language real time when i need to refresh

Answer 1

Language won't change because you are defining the labels inside the data. Try moving it to a computed property.

    computed: {
      filters() {
        return [
          { label: this.$t('myTasks.filter.Incomplete'), value: 2 },
          { label: this.$t('myTasks.filter.done'), value: 3 },
          { label: this.$t('myTasks.filter.all'), value: 1 }
        ];
      },
    },

Once you move it to a computed prop the value of the labels should change accordingly to the language