vuejs-datepickerで動的に多言語対応する方法

概要

ユーザーが設定している表示言語設定に応じてvuejs-datepickerの表示言語を動的に変更するという実装をする際、vuejs-datepickerの表示言語を親コンポーネントから制御する方法に詰まったのでメモを残しておくの巻

困ったこと

親コンポーネントとvuejs-datepickerを使用している子コンポーネントが存在し、親コンポーネントから渡すpropsに応じて子コンポーネント側で使用しているvuejs-datepickerの表示言語を変更すること

解決策

全ての言語を配列としてimportし、dataオブジェクトの任意のプロパティの値として指定しておきます（下記コードの場合、all_langという名前でimportし、dataオブジェクトのlanguagesというプロパティの値としてall_langを指定しています）。
そして親コンポーネント側から使用したい言語を文字列でpropsとして渡し、その文字列をもとにlanguagesの配列から使用したい言語オブジェクトを抽出し、それをdatepickerのlanguageプロパティに指定すれば解決しました！あとは何らかの方法でjaやenなど言語の識別文字列をどこからか取得するだけ。
ちなみに下記の場合、親コンポーネントからスペイン語を指定しており、デフォルト日本語になっています！

App.vue

<template>
    <calender
        v-model="form.specical_date"
        title="ブロックタイトル"
        placeholder="プレースホルダー"
        language="es"
    />
</template>

<script>
import Calender from './components/Calender.vue';
export default {
    components: {
        Calender,
    },
    data() {
        return {
            form: {
                specical_date: null,
            },
        };
    },
};
</script>

Calender.vue

<template>
    <div>
        <span>{{ title }}</span>
        <datepicker
            format="yyyy-MM-dd"
            :language="languages[language]"
            :placeholder="placeholder"
            :clear-button="true"
            @input="updateDate"
        />
    </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';
import * as all_lang from 'vuejs-datepicker/dist/locale';
export default {
    components: {
        Datepicker
    },
    props: {
        title: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: ''
        },
        language: {
            type: String,
            default: 'ja'
        }
    },
    data() {
        return {
            languages: all_lang,
        };
    },
    methods: {
        updateDate(val) {
            this.$emit('input', val);
        },
    }
};
</script>