Compile-time immutability with ComputedRef vs Readonly<Ref> types

[unshame]

I've been trying to implement immutability-by-default for refs in a project I'm working on. I noticed that there are three different ways to mark a ref as readonly:

• DeepReadonly<UnwrapNestedRefs<T> returned by readonly where DeepReadonly is specific to @vue/reactivity
• Readonly<T> returned by shallowReadonly where Readonly is the default ts helper type
• ComputedRef<T> returned by computed

For refs with primitive values the first and the second options are the same, i.e.

let readonlyRef = readonly(ref(true));
readonlyRef = shallowReadonly(ref(true));
readonlyRef = ref(true);
readonlyRef.value = false; // TS2540: Cannot assign to 'value' because it is a read-only property.

I would expect ComputedRef to work exactly the same way, however it doesn't.

let readonlyRef = readonly(ref(true));
readonlyRef = computed(() => true); // fine

let computedRef = computed(() => true);
computedRef = readonly(ref(true)); 
// Type 'Readonly<Ref<true>>' is missing the following properties from type 'ComputedRef<boolean>': [ComputedRefSymbol], effect

This means that if I define a composable that accepts a ComputedRef, I will not be able to pass a regular Ref into it, which is not what I would expect. Instead, I have to define the argument as Readonly.

declare function useSomething(someRef: ComputedRef<boolean>);
declare function useSomethingElse(someRef: Readonly<Ref<boolean>>);

const someRef = ref(true);

useSomething(someRef); // Argument of type 'Ref<boolean>' is not assignable to parameter of type 'ComputedRef<boolean>'.
useSomethingElse(someRef); // okay

It seems the ComputedRef type exposes some vue internals. Digging through the commits, I found that ComputedRefSymbol was added with script setup, while effect was there from the beginning. This is not documented however, and the official docs state the types I expected:

// read-only
function computed<T>(
  getter: () => T,
  // see "Computed Debugging" link below
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>> // Readonly<T> is incorrect though

// writable
function computed<T>(
  options: {
    get: () => T
    set: (value: T) => void
  },
  debuggerOptions?: DebuggerOptions
): Ref<T>

It seems like ComputedRef is an internal type that shouldn't be exposed, and Readonly<Ref> should be used instead. Same goes for the WritableComputedRef.

So the question is: am I wrong in this assumption? Are there some use-cases outside of vue internals that require to differentiate between a computed and a regular ref, or to use the effect property? I feel like either computed needs to be changed to return a Readonly<Ref>, or the documentation needs to be updated.