Ref / Computed inside reactive object

Hello everyone!

I’m here just to ask you how will you handle a similar case study.
Think about a composable useProduct that simply inject a provided value from the top so:

const useProduct = () => {
  const product = inject('ProductProviderValue') // product is a plain object
  return reactive(product) // maybe also readonly(reactive(product))
}

guessing now in the same hook, adding a computed like formattedPrice

const useProduct = () => {
  const product = inject('ProductProviderValue') // product is a plain object
  const { price } = toRefs(product) 
  const formattedPrice = computed(() => price.toFormatIWant())
  return reactive({ ...product, formattedPrice })
}

I think this is frustrating cause I just want to provide the correct value in the correct format but it’s strange having reactive object with computed or ref inside (that you must read with .value synthax)

In react this case is not present cause you use useState or useMemo etc to declare reactive objects, but there, what is the best thing to do?

Thanks in advice,
L.