Adding Vuex store to an existing instace

I am trying to test my components with Storybook, however my setup is a bit custom in the sense that I initiate my Vuex store on the window of the page and then import the components in UMD format on demand and pass them the store during instantiation.

I have a promise on the window that resolves once I am ready to start instantiating components, I am trying to create a decorator in Storybook to delay rendering the component I am trying to test until this promise has resolved, now this works accept Storybook has already created the component before the store exists, it simply doesn’t render it until the promise has resolved.

Essentially what I would like to do is take an existing vue instance and pass it the store on so it can be accessed via this.$store.

I have tried this by doing things like:

story.prototype.$store =

As well as:

h('story', { store: })

The full decorator can be seen here:


const waitForStore = () => (() => ({
    data() {
        return {
            ready: false
    async created() {
        try {
            await window.components.resourcesLoaded;
            this.ready = true;
        } catch (err) {
            console.log(new Error('Error loading resources', err));
    render(h) {
        if (this.ready) {
            // The <story> component is already created as a component of the decorator
            // At this point it is too late to add the store?
            const { story } = this.$options.components;

            console.log({ story });

            return h('story')

            // Doesn't do anything, store key is ignore
            // -
            // return h('story', { store: });
        return h('span', 'Waiting for store...');

export { waitForStore };