Vue 2 Not Being Reactive

[justwiebe]

Reproduction

https://codesandbox.io/s/vue-2-playground-forked-sjbe72?file=/src/App.vue

Steps to reproduce the bug

1. Click on "Push Array!"
2. Click on "Update Str!"
3. Click on "Update!"

Expected behavior

A click on Push Array and Update Str should be reflected in the DOM

Actual behavior

Nothing happens until "Update!" is clicked. After this, "Push Array!" always updates the DOM, but "Update Str!" clicks are still only reflected when "Push Array!" is clicked

Additional information

No response

[posva]

This is quite confusing, you shouldn't need to write .value in the templates in the first place so there is clearly something not working 😓 . I'm struggling to reproduce this consistently on https://github.com/piniajs/example-vue-2-vite and I'm unsure where this is coming from. It seems to happen without mapStores() too.

After trying locally, the error seems to go away so I think you have outdated dependencies (which probably include two versions of Vue). Try regenerating the lockfile and ensure the vue-template-compiler is the same version as vue

[justwiebe]

@posva I deleted the yarn.lock and regenerated it in my actual repo and this is still happening. I've got both vue and vue-template-compiler set to 2.7.14. Could it have something to do with Webpack?

[posva]

It should be due to webpack because it did error on vite too... Try checking if you have multiple versions of vue being used by activating the sourcemaps and inspecting the result. Moving to a discussions so others can help

[justwiebe]

It should just be a single version of Vue because I'm using Module Federation...

[justwiebe]

@posva I checked my devtools and there was indeed multiple Vue versions being loaded. I updated my module federation config and changed the vue alias import from esm to 'vue$': 'vue/dist/vue.common.js' and it seems to be working now, thanks!