[Vue.js] Helper function to make async component

vueAsync.ts

import Vue, { VNode, CreateElement } from "vue";
import { RecordPropsDefinition } from "vue/types/options";
import { TsxComponent } from "vue-tsx-support";

export function vueAsync<Props>(definition: {
  props?: RecordPropsDefinition<Props>;
  renderAsync(this: Vue & Props, h: CreateElement): Promise<VNode>;
  loading(this: Vue & Props, h: CreateElement): VNode;
}): TsxComponent<Vue, Props> {
  const { props, renderAsync, loading } = definition;
  const ret = Vue.extend({
    props: props || {},
    data() {
      return {
        cache: undefined as VNode | undefined
      };
    },
    computed: {
      _updateChecker() {
        this.cache = undefined;
        this.renderAsync(this.$createElement)
          .then(vnode => {
            this.cache = vnode;
          })
          .catch(e => {
            // TODO
            console.log(e);
          });
        return 0;
      }
    },
    methods: {
      renderAsync: renderAsync as (h: CreateElement) => Promise<VNode>,
      loading: loading as (h: CreateElement) => VNode
    },
    render(h): VNode {
      this._updateChecker;
      return this.cache || this.loading(h);
    }
  });
  return ret as any;
}