Problem using vue-currency-input with :initial-values

[appcarrareto]

I am having difficulty using vue-currency-input with the :initial-values property of the <Form> component in vee-validate.

The value is not being returned formatted in the input. Here is the example link I am using: Value Formatting and Masks

<script setup lang="ts">
import { watch } from 'vue';
import { useCurrencyInput } from 'vue-currency-input';
import { useField } from 'vee-validate';

const props = defineProps({
  name: String,
  options: Object,
});

const { formattedValue, numberValue, inputRef } = useCurrencyInput(
  props.options
);
const { errorMessage, handleChange } = useField(props.name);

// We can track the formatted value ourselves and sync it with vee-validate as a number when possible
watch(numberValue, (newValue) => {
  // sync it with vee-validate, this will trigger validation
  handleChange(newValue);
  // handleChange(newValue, false); // doesn't trigger validation
});
</script>

<template>
  <div>
    <label for="currency">Enter the amount then blur the field</label>
    <input id="currency" ref="inputRef" type="text" :value="formattedValue" />
    <span class="error">{{ errorMessage }}</span>
  </div>
</template>

I would like to ask for help in resolving this issue.