Change the Locale Dynamically

Yesterday I placed a request related to the locale change dynamically in the wrong place.

First of all, i am still a newbie with vuejs. I'm using this Boilerplate Repo for my project. https://github.com/cretueusebiu/laravel-vue-spa I do not want to use a bootstrap datepicker because it uses jquery. I do not want to use jquery too. With vue-i18n https://github.com/kazupon/vue-i18n module, all controls in the form can be translated dynamically. But not with vue-datepicker. I'm using this "tricky" code.

import lang from '~/store/modules/lang'
data: {
local: {
...
monthsHead: lang.state.locale == 'en' ?
'January_February_March_April_May_June_July_August_September_October_November_December' \
.split('_') : 
'Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember' \
.split('_') ,
...
}
}

But the result appears only after the page reload.

UPDATE I came with this "trick". I do not know if this is a good solution, but working for me. Form:

<div class="col-6">
<label for="start_date">{{ $t('start_date') }}</label>
<vue-datepicker-local :local="datelocale()" id="start_date" format="MM-DD-YYYY" v-model="form.start_date" :class="{ 'is-invalid': form.errors.has('start_date') }" input-class="form-control">
</vue-datepicker-local>
</div>

Script :

...
datelocale: () => {
if(lang.state.locale === 'en') {
return {
dow: 0,
hourTip: 'Select Hour',
minuteTip: 'Select Minute',
secondTip: 'Select Second',
yearSuffix: '',
monthsHead: \
'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
months: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
weeks: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),
cancelTip: 'cancel',
submitTip: 'confirm'
}
} else {
return {
dow: 0,
hourTip: 'Pilih Jam',
minuteTip: 'Pilih Menit',
secondTip: 'Pilih Detik',
yearSuffix: '',
monthsHead: \
'Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember'.split('_')
months: 'Jan_Feb_Mar_Apr_Mei_Jun_Jul_Ags_Sep_Okt_Nov_Des'.split('_'),
weeks: 'Mg_Sn_Sl_Rb_Ka_Ju_Sb'.split('_'),
cancelTip: 'batal',
submitTip: 'confirm'
}
}
},
...

weifeiyue / vue-datepicker-local

Change the Locale Dynamically #43