Component doesn't render the changes after update from composables fn

[phelps-90]

Hell everyone i am new. Hope you can help me with this thing that is making me crazy:
App made with: VITE, INERTIA, VUE , LARAVEL
i have a composables function that noly return true if more than 2 month have passed.

import { ref, computed } from "vue";

export const useConfrontDate = (date) => {
    const confrontDate = computed(() => {
        let currentDate = new Date();

  
        let differenceYears = currentDate.getFullYear() - date.getFullYear();
        let differenceMonths = currentDate.getMonth() - date.getMonth();
        let totalDifferenceMonths = differenceYears * 12 + differenceMonths;

        return totalDifferenceMonths >= 2;
    });

    return { confrontDate };
};

This is the usage i do of it in the component: Map

<template>
        <Box>
            <div>
                <div class="flex justify-between gap-1">
                    <span class="mb-2 text-2xl font-bold">{{ map.number }}</span> 
                    <Link :href="route('map.show', map.id)">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
                        </svg>
                    </Link>
                    <span class="mb-2 text-2xl font-bold">{{ map.city }}</span>  
                    <span>
                        <div>
                            <Link :href="route('map.edit', map.id)">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                </svg>
                            </Link>
                        </div>
                    </span>  
                </div>
                <div class="flex justify-between mt-3">
                    <div><MapDetail :map="map" :confrontDate="confrontDate" /></div>
                    <div @click="forceReload" class="mt-5">
                            <form @submit.prevent="update">
                                <button type="submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
                                    </svg>
                                </button>
                            </form>
                        </div>
                </div>
            </div>
        </Box>
    <div>

    </div>

</template>

<script setup>

import Box from '@/Components/UI/Box.vue'
import MapDetail from '@/Components/UI/MapDetail.vue'
import { useConfrontDate } from '@/Composables/useConfrontDate';
import { Link, useForm, router} from '@inertiajs/vue3';


const props = defineProps({
  map:Object,
})

const form = useForm({
    number: props.map.number,
    city: props.map.city,
    publisher_id: null,
    assigned_on: null,
    back_on: new Date().toISOString().slice(0, 19).replace('T', ' '),
    digital: 0,
 })

const update = async () => {
  await form.put(route('map.update', props.map.id), {
    preserveScroll: true,
  });
};

 const { confrontDate } = props.map.assigned_on ? useConfrontDate(new Date(props.map.assigned_on)) : { confrontDate: false };

</script>

As you see when i click on the update button it triggers the function update that correctly update the backend..
the only thing that is not updated is the layout. The mapDetail receive the prop :confrontDate="confrontDate" and in this componet i have just this thing:

<!-- MapDetail.vue -->
<template>
  <div class="flex flex-col">
    <span class="font-bold mb-2">Rientrato il: {{ formattedDateIn }}</span>
    <span class="font-bold mb-2">Assegnato il: {{ formattedDateOut }}</span>
    <span class="font-bold mb-2">Proclamatore: <span :class=" 'text-green-700' ">{{ map.publisher == null ? '' : map.publisher.surname + ' ' + map.publisher.name }}</span></span>
    <span class="font-bold mb-2">Digitale: {{ map.digital ? 'Si' : '' }}</span>
    <span v-if="confrontDate" class="mb-2 text-white bg-red-700 p-1 text-center rounded-lg border border-gray-300">Territorio fuori da troppo</span>
  </div>
</template>


<script setup>
import { useFormatDate } from '@/Composables/useFormatDate';
//import { useReadyMap } from '@/Composables/useReadyMap';
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  map: Object,
  confrontDate: Boolean 
});

const formattedDateIn = ref('');
const formattedDateOut = ref('');

const updateDates = () => {
  formattedDateIn.value = useFormatDate(props.map.back_on).formattedDate.value;
  formattedDateOut.value = useFormatDate(props.map.assigned_on).formattedDate.value;
};

onMounted(updateDates);
watch(() => props.map, updateDates);

</script>

i have to reload the page manually to erease the condition confrontDate that is clearly false after update..

How can i solve? How can i tell vue to read again the newly updated component all after PUT update has been done?

Thank you i was clear.
Sorry but i am italian and not an english spinking people