Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNqFU02P0zAQ/StDLm6lJO5eQ1sJwQEkJJBgxQFzyDbTJktiW7bTahXlvzNO3XwUwZ6SGT8/v3l+7qJ3WqfnFqMs2tqDqbQDi67VeyGrRivjoAODR+jhaFQDjKBsXPpeuRrfl1VdhNWUTy3POkG/uBLNEjq1AlTIg5LWgfMcsPPnrthHrGsFP5SpizdsfYOcjGo1FgHUWdWgKyt5yoA5tI71hOQcAl/+Gz9X9LODn0xJZDGhLor98kfStJ+kQ3PO69Vqvdt3QsJVQUqt1uuQeIEPucPV+q2QfQwPm82G+Lf8ahhZRYXDRtcEomo78yUbqHYiGr4iAu4BMzfOyVMlCwKEkQiSecHUuRMb9vLxpCiOru4mTa7TZ6sk3eKgX4QFK6IMho7vkcu+FlHpnLYZ5/Z48NY/21SZE6e/1LTSVQ2maJvkyaiLRUPEIopnHJyaZzSJQVmgQfM/zjvoX7yetidTaZRlcnwe55aWD3uArhtc7HuALafOwo3hFu4iXOCxkvjVKG1X08WOlrgXTcU3Zyg5NyXziyVVy5AuVD1KiQe0Njcv0OqCWgUoSSLHqu9f0Xd7Yko+XrfEPs/zt0aJI9tD6m+84WkkzAfSL4/7pwgH7D9CTFPO5+z/ACVQZlk=

Steps to reproduce

Hello, I need advice on this magic. I don't think it is expected behavior.

If template is updated (eg. title ref is updated), OtherChild component is also unnecessarily re-rendered. Note, that title is not used in the grouped object, and the problem is connected with v-bind usage together with other object/array prop.

<template>
<TitleChild :title="title" />
<OtherChild v-bind="grouped" :take="['one', 'two']" />
</template>

If the second prop of OtherChild is defined in the script, it works as it should. No unnecessary renders.

<template>
<TitleChild :title="title" />
<OtherChild v-bind="grouped" :take="takeList" />
</template>

<script setup>
const takeList = ['one', 'two'];
</script>

What is expected?

Should not re-render with v-bind and another prop in the template.

What is actually happening?

OtherChild component is also unnecessarily re-rendered.

System Info

No response

Any additional comments?

No response

• The change to title makes the component re-render
• During the re-render, a fresh inline array is being created in the template and passed to OtherComponent, which makes OtherComponent re-render, because the attribute's content changed (it's a new array).

Expected Behavior. Solution: extract the array into a variable in <script>