I am trying to add a formatted field to my vue app by using maska.
Until now it works fine if my value do not have faction digits (for instance 26767).

But if I get a value with faction like 26717.01 i get the output 2.671.701 (i expect 26.717,01)

Can someone point me to the right direction?

<script setup lang="ts">
import { vMaska } from "maska/vue";


const emit = defineEmits([ 'update:modelValue']);

let props = defineProps({
  amount: {
    type: Number
  },
})

const options = {
  number:{
    fraction: 2,
    locale: 'de-DE'
  },
};

</script>
<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: 'AmountField',
});

</script>

<template>
  <v-text-field
    variant="outlined"
    :clearable=false
    density="compact"
    auto-grow
    rows="1"
    :model-value="props.amount"
    v-maska="options"
    v-bind="$attrs"
    @maska="(event) => {console.log(event.detail.unmasked); emit('update:modelValue',Number(event?.detail?.unmasked))}"
  />
</template>

<style scoped>

</style>

my testcases looks like:

import AmountField from "@/components/elements/AmountField.vue";

describe('xxxx', (): void => {

  it('no fraction', () => {

    cy.mount(AmountField, {
      propsData: {
        amount: 26717,
        editable: true,
        id: "amountField"
      }
    } as any).then(({wrapper, component}) =>
    {
      cy.get("#amountField").find('input').should('have.value', '26.717').should('not.be.disabled')
      cy.get("#amountField").find('input').type('{selectAll}1234,56').then(() => {
        expect((wrapper).emitted('update:modelValue')).to.have.length;
        expect((wrapper).emitted('update:modelValue')[7][0]).to.equal(1234.56)
      })

    });
  })

  it('with fraction', () => {

    cy.mount(AmountField, {
      propsData: {
        betrag: 26717.01,
        editable: true,
        disabled: true,
        id: "amountField"
      }
    } as any);
    cy.get("#amountField").find('input').should('have.value', '26.717,01')
  })

})