InertiaJS and nWidart/laravel-modules loading Node package Problem - vue.js

Question

I'm trying to build a moduler application with laravel-modules. I'm using Vue2 and InertiaJS on the front end and nWidart/laravel-modules on the backend.
In one of my modules I want to inlcude the vue-flowy package that no other module uses, and this module may not be installed on all installations of my app, so I don't want to load it in the root package.json file.
If I install the module in the primary package.json file, it works beautifully. But trying to install it in the module's package.json file will build in mix, but running the page gives me erors:
Modules_MyModule_Resources_js_Pages_Index_vue.js:660 [Vue warn]: $attrs is readonly.
Modules_MyModule_Resources_js_Pages_Index_vue.js:660 [Vue warn]: $listeners is readonly.
I'm assuming that the vue-flowy package is trying to build a secon Vue instance to run on, but I don't understand why or how to fix it.
/Modules/<myModule>/package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"cross-env": "^7.0",
"laravel-mix": "^6.0.43",
"laravel-mix-merge-manifest": "^0.1.2",
"vue-flowy": "^0.3.1"
}
}
Vue Component Script section - this is pulled directly from the example on the vue-flowy website
<script>
import { VueFlowy, FlowChart } from 'vue-flowy';
export default {
components: { VueFlowy },
props: {
//
},
data() {
return {
chart: new FlowChart(),
}
},
mounted() {
const idea = this.chart.addElement('idea');
const A = this.chart.addElement("A", { label: "vscode" });
const B = this.chart.addElement("B", { label: "github" });
const C = this.chart.addElement("C", { label: "npm" });
idea.leadsTo(A).leadsTo(B);
A.leadsTo(C);
A.on("click", function() {
console.log("click!");
});
},
}
</script>
Main app.js file in /resources/js/app.js
import Vue from 'vue';
import { Link } from '#inertiajs/inertia-vue';
import BootstrapVue from 'bootstrap-vue';
////////////// Bunch of other stuff ///////////////
const el = document.getElementById('app');
InertiaProgress.init();
Vue.prototype.eventHub = new Vue();
new Vue({
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => {
// Determine if this is a primary page, or module page
let parts = name.split('::');
let module = false;
let page = false;
if(parts.length > 1)
{
// If it is a module page, load the module from the correct folder
module = parts[0];
page = parts[1];
if(module)
{
return import(`../../Modules/${module}/Resources/js/Pages/${page}.vue`)
.then(({ default: page }) =>
{
if (page.layout === undefined)
{
page.layout = Guest;
}
return page;
});
}
}
// primary page, load from the Pages folder
return import(`./Pages/${name}`)
.then(({ default: page }) =>
{
if (page.layout === undefined)
{
page.layout = Guest;
}
return page;
});
}
},
}),
}).$mount(el)