Vue 3's Suspense component, ready for use in Vue 2.x (TypeScript)

Suspense.ts

import Vue from 'vue';

export const Suspense = Vue.extend({
  name: 'Suspense',
  data: () => ({
    resolved: false,
  }),
  async created() {
    const setupMethod = (this.$parent as any).setup;
    if (!setupMethod) {
      throw new Error(
        '[Suspense] No setup method found - make sure Suspense is at root ' +
          'level, just inside <template>'
      );
    }

    await setupMethod();
    this.resolved = true;
  },
  render(createElement) {
    return createElement(
      'div',
      this.resolved ? this.$slots.default : this.$slots.fallback
    );
  },
});

How to apply this in real-life? I've added this to my main.ts. I had to add to register the component, so I had to change it to:

let suspense = Vue.extend({
  name: 'Suspense',
  data: () => ({
    resolved: false,
  }),
  async created() {
    const setupMethod = (this.$parent as any).setup;
    if (!setupMethod) return;

    await setupMethod();
    this.resolved = true;
  },
  render(createElement) {
    return createElement(
      'div',
      this.resolved ? this.$slots.default : this.$slots.fallback,
    );
  },
});
// register
Vue.component('Suspense', suspense)

Then I went ahead and created an async setup()-component, and wrapped it in a -tag.

<Suspense>
    <AsyncComponent/>
    <template #fallback>Loading...</template>
</Suspense>

Which contains something like:

export default {
    async setup() {
        let thing = await someAsyncFunction()
    }
}

However, it remains stuck in fallback, because the setup()-function doesn't seem to exist in this.$parent. I've been going through "this", but cannot find the component/setup-function anywhere in here. I think you have a different usecase in mind perhaps (perhaps not globally?)?

setup() needs to be a method:

method: {
  async setup() { }
}