Decimal/Float input field with locale format

Question

I'd like to solve the following issue:

I got an <input> field that is designed for users to enter decimals like 12.5 in their locale-specific format.

In my case: German locale.

In Germany, we are using a comma as decimal separator.

So the input 12,5 should be computed to a model's value of 12.5.

This is my approach:

<template>
        <input
            :id="'form-'+name"
            v-model="displayValue">
</template>
<script>

export default {
    name: 'DecimalField',
    props: {
        value: [String, Number],
    },
    data: () => ({
        innerValue: '',
    }),
    watch: {
        innerValue (newVal) {
            this.$emit ('input', newVal);
        },
        value (newVal) {
            this.innerValue = newVal;
        }
    },
    computed: {
        displayValue: {
            get: function () {
              return Intl.NumberFormat("de-DE",
                    { style: "decimal" }).format(this.innerValue);
            },
            set: function (modifiedValue) {
                this.innerValue = Intl.NumberFormat("en-GB",
                    { style: "decimal" }).format(modifiedValue);
            }
        }
    },
}
</script>

(You may want to tinker around with this on codepen: https://codepen.io/spqrinc/pen/QWEaYQo ).

** The problem is:**

If you enter 12.5 the value shown in the input is being shown as 12,5 (which is correct in Germany). But if you try to type 12,5, you get NaN.

My question: How can I solve this?