$store is undefined inside OfficeLayer

[super2ni]

Describe the bug I tried to create my own Modal component using OfficeLayer. It seems that Vuex $store is not "pushed" to the components inside OfficeLayer slot.

To Reproduce

1. Use the OfficeLayer component like this for example:

<template>
  <OfficeLayer>
      <div class="Modal-content">
        <div class="Modal-header">
          <template v-if="title">{{title}}</template>
          <button @click="$emit('closeModal')" class="Modal-close">Fermer</button>
        </div>
        <SaveAttachments/>
      </div>
  </OfficeLayer>
</template>

2. Inside the child component of OfficeLayer ("SaveAttachments" in above case), try to access $store.
3. $store is undefined

Expected behavior $store in child component should be accessible.

[s-bauer]

Thanks for reporting this! I'll take a look at this!

[s-bauer]

The problem here is that Vue does not allow to render stuff outside the root element (e.g. the <div id="app"></div> element). I however have to render the content of the OfficeLayer directly in the body, I currently do a workaround, which basically consists of creating a <div> in the body using document.createElement and then creating a new Vue({}) which mounts to this <div>. So the content of the OfficeLayer is completely cut out of the dependency tree of your application. So it makes sense that the mixed in $store variable is not available.

I'm trying to find a fix for this. It's easy to just support vuex, but I want to find a general solution, which works with all mixins and injected properties.