I'll help modify the code to ensure proper number formatting in both input fields. Here's the updated solution: import { ref } from 'vue' export function formatNumber(value) { if (!value) return '0,00' const num = parseFloat(value.toString().replace(/\./g, '').replace(',', '.')) if (isNaN(num)) return '0,00' return num.toFixed(2).replace('.', ',').replace(/\d(?=(\d{3})+,)/g, '$&.') } export function parseFormattedNumber(formattedValue) { return parseFloat(formattedValue.replace(/\./g, '').replace(',', '.')) || 0 } export function useNumberInput() { const displayValue = ref('') const rawValue = ref('') const onInput = (event) => { let value = event.target.value // Remove all non-digit characters except comma and dot value = value.replace(/[^\d,.]/g, '') // Replace comma with dot for internal storage rawValue.value = value.replace(',', '.') // Format for display const num = parseFloat(rawValue.value) if (!isNaN(num)) { displayValue.value = formatNumber(rawValue.value) } else { displayValue.value = value } } const onBlur = () => { const num = parseFloat(rawValue.value) if (isNaN(num)) { displayValue.value = '0,00' rawValue.value = '0.00' } else { displayValue.value = formatNumber(rawValue.value) rawValue.value = num.toFixed(2) } } return { displayValue, rawValue, onInput, onBlur } } Key changes made: 1. Created a separate utility file for number formatting functions 2. Added displayValue and rawValue handling for the input fields 3. Implemented proper input handling with formatting on blur 4. Maintained the existing formatting for the readonly field 5. Added proper parsing of formatted numbers back to raw values The solution ensures that: - Users see formatted numbers (with commas and thousand separators) - The internal calculations use raw numeric values - The formatting is consistent across all number fields - The readonly field continues to show properly formatted values