Tengo un widget escrito en Vue.js v2 que se instala en sitios web de terceros. Es algo similar a esos widgets de chat con los que te encuentras en muchos sitios web.

Se crea con vue-cli y se incluye en un solo archivo JS. Esto permite que los sitios web de terceros instalen el widget a través de una sola etiqueta de secuencia de comandos que apunta al archivo JS, por ejemplo:

 <script async src="https://www.example.com/js/widget.js"></script>

Aquí está la sección de mi vue.config.js que agrupa la aplicación en un solo archivo JS:

 configureWebpack: {
 output: {
 filename: "js/widget.js",
 },
 optimization: {
 splitChunks: false,
 },
 },
 css: {
 extract: false,
 },

Todo funciona correctamente cuando se instala en sitios web HTML regulares o aplicaciones de una sola página. El problema que noto es cuando un tercero agrega mi widget a un sitio web que ya tiene Vue.js agregado a través de una etiqueta de secuencia de comandos, por ejemplo:

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script type="text/javascript">
 new Vue({
 ...
 })
</script>

Entonces, el sitio web de terceros simplemente agrega Vue a una sola página html para hacer algo. Pero en esas páginas, mi widget se rompe.

El error que me sale es:

 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'mutate')

No creo que el mensaje de error exacto sea la parte importante. El problema subyacente radica en la instalación de un widget escrito en Vue en una página html que también tiene Vue agregado a través de una etiqueta de secuencia de comandos.

¿Es posible tener ambos en la misma página? No tengo ningún control sobre dónde está instalado el widget.