Understanding Why a Directly-Passed/"Harcoded" Child-Prop Watcher Inconsistently Triggers when Parent Rerenders

[shengslogar]

Research

This seems related to #8039, which was indicated to be expected behavior, so I'm hoping for some insight into to the why my use-case behaves the way it does.

You send a new object as source on every parent re-render, so the watch triggers again and again.

I've been directly-passing arrays and objects to Vue components for as long as I can remember, as seen in the official docs.

<BlogPost :comment-ids="[234, 266, 273]" />

I always assumed that this somehow created a computed-esque property, but this only seems somewhat true. Vue 3 seems to cache static properties; Vue 2 seems to be more consistent in how it reacts.

Repro

Vue 3 demo
Vue 2 demo

I set up a few different test cases in the demos above, but the most straightforward example is as follows:

App.vue

<template>
   <input v-model="inputValue" />
   <Comp :foo="(bar) => bar.length" />
</template>

<script setup>
import Comp from './Comp.vue'
const inputValue = ref('');
</script>

Comp.vue

<script setup>
const props = defineProps({
   foo: Function,
})

watch(
   () => props.foo,
   () => console.log('Watcher fired')
);
</script>

When rendered, any time you enter a different value into <input> with your keyboard, the props.foo watcher will fire. If we replace props.foo with an array — say [234, 266, 273], exactly what's in the Vue.js documentation — the watcher will not fire.

Question

1. If a fresh value is being passed every time the parent is rerendered, why is passing a function triggering the watcher, but an array isn't? Is it because Vue is internally comparing the underlying values and can't do that with a function?
2. Assuming the first part of (1) is true, why would we ever want to directly pass regular values instead of computed values?

Thanks in advance to anyone reading this far.