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

packages/reactivity/__tests__/readonly.spec.ts

@@ -8,7 +8,8 @@ import {
   effect,
   ref,
   shallowReadonly,
-  isProxy
+  isProxy,
+  computed
 } from '../src'
 
 /**
@@ -435,6 +436,25 @@ describe('reactivity/readonly', () => {
     ).toHaveBeenWarned()
   })
 
+  // https://github.com/vuejs/vue-next/issues/3376
+  test('calling readonly on computed should allow computed to set its private properties', () => {
+    const r = ref<boolean>(false)
+    const c = computed(() => r.value)
+    const rC = readonly(c)
+
+    r.value = true
+
+    expect(rC.value).toBe(true)
+    expect(
+      'Set operation on key "_dirty" failed: target is readonly.'
+    ).not.toHaveBeenWarned()
+    // @ts-expect-error - non-existant property
+    rC.randomProperty = true
+
+    expect(
+      'Set operation on key "randomProperty" failed: target is readonly.'
+    ).toHaveBeenWarned()
+  })
   describe('shallowReadonly', () => {
     test('should not make non-reactive properties reactive', () => {
       const props = shallowReadonly({ n: { foo: 1 } })

packages/reactivity/src/baseHandlers.ts

@@ -197,7 +197,13 @@ export const mutableHandlers: ProxyHandler<object> = {
 
 export const readonlyHandlers: ProxyHandler<object> = {
   get: readonlyGet,
-  set(target, key) {
+  set(target, key, value, receiver) {
+    if ((target as any).__v_isComputed) {
+      // computed should be able to set its own private properties
+      if (key === '_dirty' || key === '_value') {
+        return set(target, key, value, receiver)
+      }
+    }
     if (__DEV__) {
       console.warn(
         `Set operation on key "${String(key)}" failed: target is readonly.`,

packages/reactivity/src/computed.ts

@@ -26,7 +26,9 @@ class ComputedRefImpl<T> {
 
   public readonly effect: ReactiveEffect<T>
 
-  public readonly __v_isRef = true;
+  public readonly __v_isRef = true
+  // flag to properly handle computed refs in readonly basehandlers
+  public readonly __v_isComputed = true;
   public readonly [ReactiveFlags.IS_READONLY]: boolean
 
   constructor(