<template>
    <Link :href="`/${$page.props.auth.user.username}/following/${user.id}`" 
    v-if="user.following" 
    preserve-scroll
    @mouseover="showUnFollow = true"
    @mouseleave="showUnFollow = false" 
    as="button" 
    method="DELETE"
    class="bg-useGreen px-3 py-1 rounded-l-2xl rounded-r-2xl text-sm font-semibold hover:bg-red-600 hover:brightness-90 transition duration-200">
        {{ showUnFollow ? 'Unfollow' : 'Following' }}
    </Link>
    
    <Link :href="`/${$page.props.auth.user.username}/following/${user.id}`" 
    v-else 
    preserve-scroll
    as="button" 
    method="POST"
    class="bg-normalWhite px-3 py-1 rounded-l-2xl rounded-r-2xl text-sm font-semibold hover:brightness-90 transition duration-200">
        {{ showUnFollow ? 'Unfollow' : 'Follow' }}
    </Link>

    <p class="text-white">{{ user.following }}</p>
</template>

<script setup>
    import { ref, watch } from "vue";

    const props = defineProps({
        user : Object
    });

    const showUnFollow = ref(false);
    const user = ref(props.user);

    watch(() => props.user, (newUser) => {
        user.value = newUser;
        console.log(newUser);
        console.log(user.value);
    });

</script>

follow isteği atılıyor ve işlem başarılı oluyor. Fakat sayfa yenilenmeden following yazısını görmüyorum.

const showUnFollow = ref(false);

olarak kalıyor sayfayı yenilediğimde true oluyor.

Ayrlca

watch(() => props.user, (newUser) => {
        user.value = newUser;
        console.log(newUser);
        console.log(user.value);
    });

watch içinde yazdığım loglar hiç bir şey göstermiyor.