Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqlVV9P2zAQ/yomLy1Sm4yxp6wFxsQkNmlDMO0pL2lybQ2ObdlOaVX1u+/8p2kSCkPaU+L7+7u739nb6IuU8aqGKI0mulBUGqLB1JKwnC+mWWR0Fl1knFZSKEPucgXckLkSFRnEiXRH6z743NhsSa3hOkf/Au6UWNESFNk1PjOvsQ4Zf2k5PLXySeKxYGZ3NFBJlhvAMyGTgCLB0yRpqTIejSKPYlzlMn7UgmNdW+uUBQWWkxInsTJEbs9ZtDRG6jRJipKjWwmMrlTMwSRcVskVmiWq5oZWMC5FdXUef4o/jHMml3l8lpRUm7Y6Bl2NZ0o8a1CxVKLEiFk0auVMULMCNcYysGRQ78XQczuGo2fSwWJhWBS7jO+wU0YXgs/potenQlSSMlC/pKGCd/uVMyaevzuZUTU0NRVLKJ6OyB/12td2p8Aha/XB5GoBxqtvHn7CGv8bZSXKmoXZvKK8By1YbTF6s+ualwi7ZefQ3rqxU774rW/WBrjeF2WBum44ezeXr2+UfoB7Hp+3ulgsKSv3G9TlqZY5d3+EbLckED8Q/TJGEv+hms4YkEsyWOWsBnI2IOn+/+OA7DDHv729Fa6MT9dbiXds9ZZQ/giFabbULnRLG3L/gM2RPbY5zEYCoYhNajL1LQvqy5TwuprhWDiiRL5p0ysFHXz24SGNuwNKmFNuraSe+NgX9nJoXQ3Y/eATG43tbwArmI+IA3XrQuMwMWoQ3VslrqVLHuoJN4FNS7kBNc+LpiBXzqHdqQ0wmQnBIEzXiMWCeTVl1GxS8q3mLqkrOuOwdrg61dtmTsnDppoJNjwlue5A3Rfc8p6HmEduV/RHkBaKT9HixtT2okE7tJx3zSWHeH34PpqlnULKKN4KF3tmTslJXxYWwn5Ca1vjHO0DHrzCjvZzuzAI0C7W4XFpvU0t/npGH1jsFrGhZ7OWnZfpP3nemeCrxPVWvjQ0Gp6mZCVoSaYX3dWIX3beEebtx8+Xad8+PMzUi5/aGBzqVcFo8WQ75XK4bbcNd2JSwYm/Mrx199KIdn8Bl+rOeg==

Steps to reproduce

<template>
  <span>
    {{ balanceProvide?.areVisible ? 'valor 1' : 'valor 2' }}
    {{ balanceProvide?.areVisible }}
  </span>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { balanceKey } from './balance'

type iProps = {
  balance?: number
}
const balanceProvide = inject(balanceKey)

defineProps<iProps>()
</script>


### What is expected?

span hide

### What is actually happening?

span is not hidding

### System Info

```shell
nioe

Any additional comments?

nope

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates

Ref unwrapping in templates only applies if the ref is a top-level property in the template render context.

{{ balanceProvide?.areVisible.value ? 'valor 1' : 'valor 2' }}

or destructure injected value

const { areVisible } = inject(balanceKey)

{{ areVisible ? 'valor 1' : 'valor 2' }}