Change in ToRefs between 3.0.2 and 3.0.3 is a breaking change

[brlodi]

Version

3.0.3

Reproduction link

https://github.com/brlodi/vue3.0.3-ToRefs-repro

Steps to reproduce

1. Run yarn/npm install and yarn/npm serve on main branch
2. Observe project builds successfully and dev server finds no issues
3. Switch to 3.0.3 branch and repeat yarn/npm commands
4. Observe multiple Typescript type errors, caused by ToRefs<T> members having different types in 3.0.3.
   • e.g. if type Foo = { bar: string | number }
     • under 3.0.2: the shape of ToRefs<Foo> is { bar: Ref<string | number> }
     • in 3.0.3: the shape of ToRefs<Foo> is { bar: Ref<string> | Ref<number> }, which cannot accept assignment of a Ref<string | number>

What is expected?

Typescript code using the Composition API which works in Vue 3.0.2 should work in all future patch versions of Vue 3.0.x

What is actually happening?

Changes to Vue's reactivity types in 3.0.3 break code that worked in 3.0.2.

---

This is obviously an extremely contrived and overly manually-typed example. In practice this came up with a composition function that returns a toRef-ed version of a reactive object for concise destructuring, as well as a component cycling its own state like the App component in the repro does.

Note this isn't value judgement of the new typings, just that changing them introduced an unexpected breaking change in a patch release.

[edison1105]

8e20375
breaking change in this commit.

[realityfilter]

This is still a problem in 3.0.4 with classes with private fields.
Version 3.0.2 is working. Vue 2 with composition api, too.

Short Example:

class X {
    a: string;
    private b: string;
}
import { defineComponent, PropType, toRefs } from 'vue';
export default defineComponent({
    name: 'TestX',
    props: {
        x: Object as PropType<X>,
    },
    setup(props) {
        const compose = (x: X) => console.log(x);
        const { x } = toRefs(props);
        compose(x.value);
    },
});

compose(x.value) is triggering typescript error:

"Argument of type '{ a: string; }' is not assignable to parameter of type 'X'. Property 'b' is missing in type '{ a: string; }' but required in type 'X'."