fix(reactivity): ensure computed wrapped in readonly still works (close #3376)

[LinusBorg]

Wrapping a computed() in readonly() breaks the computed's functionality.

This PR ensures that such a wrapped computed can still set its internal proeprties _dirty & _value, ensuring it can continue to work as expected.

close #3376

[github-actions]

Size report

Path	Size
vue.global.prod.js	40.93 KB (+0.11% 🔺)
runtime-dom.global.prod.js	27.2 KB (+0.13% 🔺)
size-check.global.prod.js	16.51 KB (+0.26% 🔺)

[LinusBorg]

I added a test but would like input if there are more scenarios to cover.

[HcySunYang]

Can we add __v_isComputed to ComputedRefImpl? like this:

class ComputedRefImpl<T> {
  private _value!: T
  private _dirty = true

  public readonly effect: ReactiveEffect<T>

  public readonly __v_isRef = true;
+  public readonly __v_isComputed = true;
  public readonly [ReactiveFlags.IS_READONLY]: boolean
}

I mean, this would be safer, consider the following scenario:

const data = ref({ effect: true })
const rData = readonly(data)

rData._value = 'xxx' // Unexpectedly 

with the __v_isComputed, we can implement the isComputed function, just like isRef.

[LinusBorg]

I'm a bit confused by the {effect: true} - that shouldn't have an impact, as that would be in target.value.effect, wouldn't it?

But nonetheless propably a safer approach., I agree.

[HcySunYang]

Oh sure, but you know what i mean 😄

[LinusBorg]

@HcySunYang I did the change you proposed, can you have a look? Thanks!

[yyx990803]

See cleaner fix in 41e02f0

[LinusBorg]

Definitely the better solution, thanks.