[Bug] <Popup> language doesn't change when prop lang changed by computed property

[Menark]

Vue2-datepicker version: 3.0.1
Vue version: 2.6.10
Browser: Chrome 78.0.3904.108

Steps to reproduce
Adding :lang prop with computed property which return object with custom localization depending on site localization (ru or en) . Change site localizaion by button. Open DatePicker.

Reproduction Link or Source Code
Ru:

  "day_of_week": {
    "1": "Пн",
    "2": "Вт",
    "3": "Ср",
    "4": "Чт",
    "5": "Пт",
    "6": "Сб",
    "7": "Вс"
  },

  "month_short": {
    "jan": "Янв",
    "feb": "Фев",
    "mar": "Мар",
    "apr": "Апр",
    "may": "Май",
    "jun": "Июн",
    "jul": "Июл",
    "aug": "Авг",
    "sep": "Сен",
    "oct": "Окт",
    "nov": "Ноя",
    "dec": "Дек"
  },

En:

  },
  "month_short": {
    "jan": "Jan",
    "feb": "Feb",
    "mar": "Mar",
    "apr": "Apr",
    "may": "May",
    "jun": "Jun",
    "jul": "Jul",
    "aug": "Aug",
    "sep": "Sep",
    "oct": "Oct",
    "nov": "Nov",
    "dec": "Dec"
  },

  "day_of_week": {
    "1": "Mon",
    "2": "Tue",
    "3": "Wed",
    "4": "Thu",
    "5": "Fri",
    "6": "Sat",
    "7": "Sun"
  },

DatePicker:

    <DatePicker
      ref="datePicker"
      v-model="dateRange"
      type="date"
      range
      :placeholder="$t('calendar.select_date_range')"
      class="date-range-picker__picker"
      :lang="currentDatePickerLang"
      @change="onDatePickerChange"
    />

Computed propperty:

  get currentDatePickerLang() {
    return {
      formatLocale: {
        monthsShort: [
          this.$t('month_short.jan'),
          this.$t('month_short.feb'),
          this.$t('month_short.mar'),
          this.$t('month_short.apr'),
          this.$t('month_short.may'),
          this.$t('month_short.jun'),
          this.$t('month_short.jul'),
          this.$t('month_short.aug'),
          this.$t('month_short.sep'),
          this.$t('month_short.oct'),
          this.$t('month_short.nov'),
          this.$t('month_short.dec'),
        ],
        weekdaysMin: [
          this.$t('day_of_week.7'),
          this.$t('day_of_week.1'),
          this.$t('day_of_week.2'),
          this.$t('day_of_week.3'),
          this.$t('day_of_week.4'),
          this.$t('day_of_week.5'),
          this.$t('day_of_week.6'),
        ],
        firstDayOfWeek: 1,
        firstWeekContainsDate: 1,
      },
      yearFormat: 'YYYY',
      monthFormat: 'MMM',
      monthBeforeYear: true,
    };
  }

Expected behavior
Month, year, weekdays language names should change depending on current lang prop.

Actual behavior
Month, year, weekdays names don't change depending on current lang prop. Prop works well. Components TableMonth and others use injected locale, which changes only on mount.

[Menark]

The problem can be bypassed by adding :key. But it doesn't solve problem.

[mengxiong10]

Yes, you can forceupdate by add :key now.
I'll fix the bug soon.

    <DatePicker
      ref="datePicker"
      v-model="dateRange"
      :lang="lang"
      :key="lang"
   />

import 'vue2-datepicker/locale/ru'

export default {
  data() {
    return {
      lang: 'en',  
   };
  },
  methods: {
    changeLocale() {
      this.lang = this.lang === 'en' ? 'ru' : 'en';
    },
  },
}; 

[Menark]

Thank you.

[mengxiong10]

v3.2.2 fixed it.