How to format text/numbers in v-text-field

[Excalibaard]

I'll try to describe my use case (Using Vuetify 2.6.3):

I use v-text-field as basis for a number input with type="number". In order to have proper localization I want to apply formatting to the actual value of the component, which is a number or a decimal. I want to do this through Intl.NumberFormat, as the component is used for currency, units, percentages, and as a regular decimal input. However, if I try to use v-model, the formatting will pollute my data.

I've tried workarounds of only showing the formatted value in the input when the input is not focused (and preventing input listener from making changes) but that because type="number" can't parse the value it shows no text or errors. I've changed that to type="text" for the time being, but that removed keyboard/mouse control support and is bad semantically. It's not trivial to try and parse a string that could be formatted according to any locale's standards back into a Number either.

I thought a default slot existed for v-text-field, but apparently that is not the case. #14145 #14265 With a default slot, I figure it could be much easier by receiving the value as a prop, formatting it, and displaying that (for example through the i18n-n component from Vue-i18n) while keeping the internal value the same.

How do you make localization work for this? V-text-field contains a lot of functionality that I use for the NumberInput as well.