Use the active pinia when manually mounting components

Otherwise the store will be wiped out whenever we mount a component manually.

client/src/utils/mountVueComponent.js

@@ -4,7 +4,7 @@
 
 import BootstrapVue from "bootstrap-vue";
 import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
-import { createPinia, PiniaVuePlugin } from "pinia";
+import { getActivePinia, PiniaVuePlugin } from "pinia";
 import Vue from "vue";
 
 // Load Pinia
@@ -22,18 +22,17 @@ Vue.use(vueRxShortcutPlugin);
 // font-awesome svg icon registration/loading
 Vue.use(iconPlugin);
 
-// Create Pinia
-const pinia = createPinia();
-
 export const mountVueComponent = (ComponentDefinition) => {
     const component = Vue.extend(ComponentDefinition);
+    const pinia = getActivePinia();
     return (propsData, el) => new component({ propsData, el, pinia });
 };
 
 export const replaceChildrenWithComponent = (el, ComponentDefinition, propsData = {}) => {
     const container = document.createElement("div");
     el.replaceChildren(container);
     const component = Vue.extend(ComponentDefinition);
+    const pinia = getActivePinia();
     const mountFn = (propsData, el) => new component({ propsData, el, pinia });
     return mountFn(propsData, container);
 };