when emitting a value to parent component the function will work, but the router.push() does not change the page url as expected.

Here is my function:

function handleRoute(value: string) {
let url = `/company/sites/${value}`;

console.log(url);

router.push(url)
    .then(() => {
        console.log('Navigation successful!');
    })
    .catch((error) => {
        console.error('Navigation failed:', error);
    });

}

when using a button to trigger that function the router.push() will work just fine. but when emitting from its child component the url will not change even though it shows Navigation is successful.

<SiteCard :siteData="site.site_name" :siteID="site.site_id" :is_existing="true"
                :class="{ 'active-card': activeCard === site.site_id }" @click="handleCardClick(site, 'site')"
                :site="site" @handleUrl="handleRoute" />