vue中props中值未监听

<template>
	<div>
		<slot :user="user">默认内容</slot>
	</div>
</template>

<script>
export default {
	props: {
		user: {
			type: Object,
			default: () => ({ age: 21 })
		}
	}
};
</script>

<template>
	<div>
		<navigation-link ref="navigationLink" :user="userInfo">
			<template #default="{user}">
				<div>user:{{ user }}</div>
				<div>user.name:{{ user.name }}</div>
			</template>
		</navigation-link>
		<button @click="click">userInfo:{{ userInfo }}</button>
	</div>
</template>
<script>
import NavigationLink from '@/components/navigation-link.vue';
export default {
	components: { NavigationLink },
	data() {
		return {
			userInfo: {
				gender: 'MALE'
			}
		};
	},
	methods: {
		click() {
			this.userInfo.name = 'ruben'
			this.$forceUpdate()
		}
	}
};
</script>

click() {
    this.$set(this.userInfo, 'name', 'ruben');
}

click() {
    this.$set(this.$refs.navigationLink.user, 'name', 'ruben');
}