React in Vue plugin not working but HOC API is

[danvim]

I have this main.ts:

import Vue from 'vue';
// tslint:disable-next-line
const {VuePlugin} = require('vuera');

Vue.config.productionTip = false;
Vue.use(VuePlugin);

import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

And my App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <gui/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import GUI from './GUI'; //react

@Component({
  components: {
    HelloWorld,
    'gui': GUI,
  },
})
export default class App extends Vue {}
</script>

And here is my GUI.tsx:

import {Component} from 'react';
import dat from 'dat.gui';

class GUI extends Component<any, any> {

  public static data: object = {};

  constructor(props: object) {
    super(props);
    this.state = {
      gui: Object,
    };
  }

  public componentDidMount(): void {
    const gui = new dat.GUI({name: 'Testing GUI'});
    this.setState({gui});
  }

  public render() {
    return null;
  }
}

export default GUI;

And this is the error message screenshot I see:

The above screenshot basically has TypeError: this is undefined error threw seemingly by both Vue and React.

However, the problem is gone when I use the ReactInVue() function for my components.

Can anyone tell me how I am using this library wrong?