Why isn't the prop expression evaluated inside child components' render functions?

[AkiSakurai]

Here is a simple program (playground) to demonstrate the issue:

Label1 is a simple component that shows a title with a single string prop, and Label2 shows the title with a function prop where we pass a lambda function as the prop.

Updating the first prop will cause the render function to be called for the entire components tree, while the second prop will only call the corresponding component.

I am curious why Vue props are not implemented like the second prop, which allows more fine-grained updates?

App.vue

<script setup>
import { ref, onBeforeUpdate } from 'vue'
import Label from './Label.vue'
import Label2 from './Label2.vue'

const data = ref({
	label1: "test",
	label2: "test2"
})

let count = 0
onBeforeUpdate(() => {
  count++
})

</script>

<template>
	Update: {{count}}
	<Label :title="data.label1"></Label>
	<Label2 :title="() => data.label2"></Label2>
	<button v-on:click="data.label1 += '+'">Update Label 1</button>
	<button v-on:click="data.label2 += '+'">Update Label 2</button>
</template>

Label1.vue

<script setup>
import { onBeforeUpdate } from 'vue'

defineProps(['title'])
let count = 0
onBeforeUpdate(() => {
  count++
})
</script>

<template>
  <h4>{{ title }} / {{count}}</h4>
</template>

Label2.vue

<script setup>
import { onBeforeUpdate } from 'vue'

defineProps(['title'])
let count = 0
onBeforeUpdate(() => {
  count++
})
</script>

<template>
  <h4>{{ title() }} / {{count}}</h4>
</template>