How to use the vue-property-decorator.Vue.extend function in vue-property-decorator

// interface IBlockListItem {
//   blockHeight: number
//   numTransactions: number
//   hash: string
//   age: string
//   time: string
//   block: IBlockchainBlock
// }

import { Vue } from 'vue-property-decorator'
// @ts-ignore
import TransactionList from './TransactionList.vue'
import { Blockchain } from '../blockchain'

export default Vue.extend({
  name: 'Transactions',
  data() {
    return {
      blockchain: new Blockchain({
        chainID: this.chainID,
        serverUrl: this.defaultUrl,
        allowedUrls: this.allowedUrls
      })
    }
  },
  components: {
    TransactionList
  },
  props: ['defaultUrl', 'allowedUrls', 'chainID']
})

import { M, MsgBus } from "./messages";
import WR from 'flux-lib/WebRequest'
import { UserV1Object, Auth } from "@/lib/api"
import { Routes, pageTitle } from './routes'
import { AppFs } from './store/app'
import { UserObject } from './lib/UserObject'

// constants - for everything w/in this components scope
enum Cs {
    // Login Consts
    IS_LOGGED_IN,
    IS_NOT_LOGGED_IN,
    IS_LOGGING_IN,
}

export default /*class App extends Vue*/ Vue.extend({
    components: { LoginForm, Loading, Error },
    data: () => ({
        req: {
            user: WR.NotRequested(),
            roles: WR.NotRequested(),
        },
        auth: undefined as any & Auth,
        user: {} as any,
        userO: {} as UserObject,
        navOpen: null as null | boolean,
        pageTitle: "",
        ...Cs
    }),
    watch: {
        $route (to, from){
            this.pageTitleUpdate();

rangeFactory: (): HTMLInputElement => {
        let ComponentClass = Vue.extend(AppInputRange);
        let instance = new ComponentClass();
        instance.$mount();

        return instance.$el as HTMLInputElement;
      }
    });

import { AxiosResponse } from "axios";
import { DataResponse, Media, MediaFile, Source } from "../types";
import axios from "../services/axios";
import DeleteModal from "../components/DeleteModal.vue";
import MediaUploadForm from "../components/MediaUploadForm.vue";
import VideoPlayer from "../components/VideoPlayer.vue";

interface Data {
  loading: boolean;
  streamReady: boolean;
  uploadDialog: boolean;
  media: Media;
  sources: Source[];
}

export default Vue.extend({
  components: { VideoPlayer, MediaUploadForm, DeleteModal },
  data: (): Data => ({
    loading: true,
    streamReady: false,
    uploadDialog: false,
    media: {} as Media,
    sources: []
  }),
  methods: {
    async deleteMedia() {
      await axios.delete(`/medias/${this.$route.params.id}`);

      await this.$router.push({ name: "MediaAll" });
    },
    rendition(rendition: MediaFile) {
      this.sources = [

show(data) {
    const resource = data.resources[0];
    const definitions = resource.properties.definitions;
    const triggers = definitions.triggers;
    const actions = definitions.actions;

    const triggerCtor = Vue.extend(Trigger);
    const instance = new triggerCtor({
      propsData: {
        title: Object.keys(triggers)[0],
        type: 'panel',
      },
    });

    const h = instance.$createElement;
    const entries = [];
    Object.keys(actions).forEach((action) => {
      if (action === 'Condition') {
        this.createCond(actions[action], h, entries);
      } else if (action === 'Panel') {
        this.createPanel(actions[action], h, entries);
      }
    });