Pinia plugin fixes when using component mounting utilities. This has

import BootstrapVue from "bootstrap-vue";

import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";

import { createPinia, getActivePinia, PiniaVuePlugin } from "pinia";

import Vue from "vue";

// Load Pinia

Vue.use(PiniaVuePlugin);

// Bootstrap components

Vue.use(BootstrapVue);

// font-awesome svg icon registration/loading

Vue.use(iconPlugin);

export const mountVueComponent = (ComponentDefinition) => {

function getOrCreatePinia() {

    // We sometimes use this utility mounting function in a context where there

    // is no existing vue application or pinia store (e.g. individual charts

    // displayed in an iframe).

    // To support both use cases, we will create a new pinia store and attach it

    // to the vue application that is created for the component if missing.

    return getActivePinia() || createPinia();

}

export function mountVueComponent(ComponentDefinition) {

    const component = Vue.extend(ComponentDefinition);

    return (propsData, el) => new component({ propsData, el });

    return function (propsData, el) {

        return new component({ propsData, el, pinia: getOrCreatePinia() });

    };

}

export const replaceChildrenWithComponent = (el, ComponentDefinition, propsData = {}) => {

export function replaceChildrenWithComponent(el, ComponentDefinition, propsData = {}) {

    const container = document.createElement("div");

    el.replaceChildren(container);

    const component = Vue.extend(ComponentDefinition);

    const mountFn = (propsData, el) => new component({ propsData, el });

    const mountFn = mountVueComponent(ComponentDefinition);

    return mountFn(propsData, container);

};

}