Component can't detect changes of a linked object from es6 module

[seanfreemannutrien]

Version

3.0.0-beta.15

Reproduction link

https://codesandbox.io/s/fancy-night-ctdp7?file=/src/App.vue:0-415

Steps to reproduce

create a js file (es6 module) that exports out an object, and import it into a component, and link to a data property (state), and component does not re-render when that object changes. In vue2, it was not the issue. ex: compare these two sandboxes, they are the same code. one is using vue3 another vue2.

vue 3: https://codesandbox.io/s/fancy-night-ctdp7?file=/src/App.vue

vue 2: https://codesandbox.io/s/vigilant-resonance-zju7f?file=/src/App.vue

What is expected?

vue3 app should behave as vue 2 when it comes to reactivity

What is actually happening?

vue3 app fails to recognize the state changes of an object that's imported and assigned to data property.

[CyberAP]

Export a ref. Object becoming reactive is a side-effect of Vue 2 reactivity, but this behaviour is not documented as expected.

[seanfreemannutrien]

It was documented. here: https://vuejs.org/v2/guide/state-management.html

it was an expected feature and lots of apps use it for a minimal state management. and it's actually so much better than vuex actually.

[CyberAP]

There is a difference of data as an object and data as a function. The former is not supported in Vue 3 and the example you've shown wouldn't work. Object becoming reactive as a result of assigning it to a data function return is a side effect of Vue 2 reactivity and it's not documented in the page you've provided. The example on that page also does not match with your example.

[posva]

For minimal state management, it's even easier with Vue 3 since you can use ref and reactive to create reactive objects and modify them anywhere while still consuming them in component templates by returning them in the setup function. Note the documentation for Vue 2 is well, for Vue 2. So it's normal for some of the things to no longer be valid

You can wrap your state with reactive or use refs and functions

[seanfreemannutrien]

you are mistaken, data has to be a function if it's a component. and data is an object if you are creating a new instance. that should not change anything.

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

[CyberAP]

Data is only a function in Vue 3 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0019-remove-data-object-declaration.md

[seanfreemannutrien]

regardless, in the codebox links i sent, i used data as a function not an object. .

[seanfreemannutrien]

the only thing vuejs could do until now that none other frameworks could do is that feature, where you can share state amazing across multiple component where that state object is just es6 module, now that's gone from vue3. it's sad. nice job guys.

[seanfreemannutrien]

Update: thanks for your suggestion on using "reactive". i've learnt to work with it and i'm satisfied. thanks.