i18n falling back to key for missing translations

Question

I have this file in my vue3 project:

// i18n.js
import { createI18n } from "vue3-i18n";
import en from "./assets/lang/en";
import ar from "./assets/lang/ar";
import tr from "./assets/lang/tr";

const messages = {
    en,
    ar,
    tr
};

const i18n = createI18n({
    locale: localStorage.getItem('lang')===null?'en':localStorage.getItem('lang'),
    messages: messages,
});

export default i18n;

What I want to do, for translations that do not exist, is to show the key, instead of an empty string.

So I tried this at first from a question I found on SO:

const i18n = createI18n({
    locale: localStorage.getItem('lang')===null?'en':localStorage.getItem('lang'),
    messages: messages,
    parseMissingKeyHandler: (key: string) => {
        return `No translation found for "${key}"`;
    }
});

The code did not even compile, I tried changing things around but even though it complied I did not see the intended message in place of the missing key.

How do I get i18n in vue3 fallback to they key for missing translations.