Language not changed of editor when translate to another lang without page reload

[dgpoo]

I am using vue-i18n for multi language and when i am changing dropdown all strings updated but ckeditor is not changing without page reload or hot reload from terminal.

Kindly provide method or solution where i can update or reset ckeditor and show in different language without page reload.

Kindly find my below code for referance

<script setup>
import { useI18n } from "vue-i18n";
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ErrorMessage from "~/Components/Partials/ErrorMessage.vue";
import '@ckeditor/ckeditor5-build-classic/build/translations/fa';

defineOptions({
    inheritAttrs: false,
});

const { t,locale } = useI18n();
if(locale.value != 'en'){
    locale.value = 'fa';   
}
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    error: {
        type: String,
        default: '',
    },
    label: {
        type: String,
        default: '',
    },
    placeholder: {
        type: String,
        default: '',
    },
    tag: {
        type: String,
        default: 'textarea'
    },
    viewType: {
        type: String,
        default: 'default'
    }
});
const emit = defineEmits(['update:modelValue']);
const editor = ClassicEditor;
const editorData = ref(props.modelValue ?? '');
const editorConfig = ref(props.viewType === 'simple' ? {
    toolbar: [ 'undo', 'redo', '|', 'link', 'imageUpload', 'mediaEmbed' ],
} : {
    language: {
          ui:locale.value,
          content: locale.value,
        },
    toolbarLocation: 'bottom'
}); //toolbar, plugins, heading: {options: }
const CKEditorComponent = CKEditor.component;
watch(
    () => editorData.value,
    (value) => {
        emit('update:modelValue', value)
    }
);
const placeholder_ = computed(() => props.placeholder && props.placeholder.length > 0 ? t(`placeholder.${props.placeholder}`) : '');
</script>

<template>
    <TagLabel :label="label" :required="$attrs?.required ?? true" />
    <div class="ckeditor-classic">
        <CKEditorComponent
            v-model="editorData"
            :editor="editor"
            :tag-name="tag"
            :disabled="$attrs?.disabled ?? false"
            :config="editorConfig"
            :placeholder="placeholder_"
        />
    </div>
    <ErrorMessage :error="error" />
</template>

What should i add here to take new language changes here.?
Thanks

[Cheaterman]

Your editorConfig object should probably be a computed() ; other than that, possibly related to #362 .