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

close vuejs#3376

Author: Thorsten Luenborg

packages/reactivity/__tests__/readonly.spec.ts

@@ -8,7 +8,8 @@ import {
   effect,
   ref,
   shallowReadonly,
-  isProxy
+  isProxy,
+  computed
 } from '../src'
 
 /**
@@ -435,6 +436,21 @@ 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)
+    ;(rC as any).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,14 @@ export const mutableHandlers: ProxyHandler<object> = {
 
 export const readonlyHandlers: ProxyHandler<object> = {
   get: readonlyGet,
-  set(target, key) {
+  set(target, key, value, receiver) {
+    // is computed()
+    if ((target as any).__v_isRef && (target as any).effect) {
+      // 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.`,