Vue 2 Composition API Components Not Updating on Data Change When Registered Using window.Vue with Laravel Mix

[eldomagan]

• Laravel Mix Version: 6.0.49
• Node Version (node -v): v20.5.0
• NPM Version (npm -v): 9.8.0
• OS: Mac OS X

Description:

I am currently working on a plugin for an e-commerce application built with Laravel and Vue.js. The plugin's purpose is to register global Vue components using the window.Vue object exposed by the e-commerce application.

The challenge I'm facing involves the integration of Vue 2 components using the Composition API while the e-commerce app uses Vue 2's Options API (I do not have access to the e-commerce app source code). The e-commerce app components are created with Vue 2 using the Options API and Laravel Mix. My plugin components, on the other hand, utilize Vue 2 with the Composition API and Laravel Mix.

While I have managed to render my plugin components successfully, they do not update when there are changes in the underlying data. My initial thoughts were that the Options API and Composition API might not be compatible when used together in Vue 2. So, I set up a test project where I implemented a similar scenario.

In my test project, I have a main.js file that exposes window.Vue, and a module.js file that registers components using window.Vue.component(). Strangely, everything works as expected when I build the project with Vite, but when I use Laravel Mix, the components registered by module.js fail to update when there are changes in the data

Steps To Reproduce:

You can a reproduction repo here
Run:

npm install
npm run mix:build
npm run dev