`$slots` not accessible in `mounted` when the build target is web component

[MrCoder]

I have created a github repo to demonstrate the issue I am facing: https://github.com/MrCoder/vue-wc-slot-issue. And also a SO question: https://stackoverflow.com/questions/58353854.

Basically, I found the when I set the target as web component with vue-cli-service, I cannot access this.$slots.default (undefined) in the mounted hook method. The vue file is as below:

<template>
  <div id="app">
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: 'app',
  mounted() {
    window.App = this;
    // undefined
    console.log(window.App.$slots.default && window.App.$slots.default[0].text);
    this.$nextTick(() => {
      // undefined
      console.log(window.App.$slots.default && window.App.$slots.default[0].text)
    });
    setTimeout(() => {
      // correct value
      console.log(window.App.$slots.default && window.App.$slots.default[0].text)      
    });
  }
}
</script>