Loss of reactivity when using ModuleFederation and different versions of Vue

[michael-iden]

Describe the bug
Reactivity with GQL queries in remote apps is lost when using ModuleFederation across remote apps that have different versions of Vue and are sharing dependencies.

To Reproduce
Stackblitz reproducing the issue. See README.md in the Stackblitz for information on how to startup and exercise the issue.*

In this reproduction, we have a host Vue app and two remote Vue apps being consumed and mounted into the host with Module Federation. If the versions of Vue in the remotes differ, remote 1 fails to render the response from the GraphQL query when the remote applications. This can be seen by the "Country" response for Vue MFE 1 being blank, when it should be showing data for Switzerland.

*Note that Stackblitz will pop up a modal saying "This project requires a connection to your localhost." once you start the host. This can be closed by hitting the escape key and you can continue on starting remote-app-1 and remote-app-2 to get the rest of the setup working

Expected behavior
Remote 1 continues to render normally when two different versions of Vue used in the remotes and shared in the webpack config.

Versions
vue: multiple but tested with 3.4.x and 3.5.x. This also happens when on two different patch versions of Vue but it was easiest to demonstrate in the repro if we have different minor versions.
vue-apollo: ^4.2.2
@apollo/client: ^3.13.8

Additional context
Warning in the console when we experience the loss of reactivity

Workaround 1 - Match Vue Versions

A first workaround is to change the package.json of remote-app-1 to use the same version of Vue as remote-app-2, 3.5.x.
After making this change, the remote-app-1 will render the response correctly.

Workaround 2 - Remove one of the remotes

Remove remote-app-2 from being mounted in App.vue of the host application and remote-app-1 will render the response correctly.

Workaround 3 - Stop sharing modules

To stop sharing modules, you can modify the webpack.config.js of either remote application to not share dependencies.
Once doing this, each remote will use its own version of Vue and the response will render correctly.