Compatibility with vue-class-component v8

[ghost]

It seems like vue-property-decorator (9.1.2) is not compatible with the upcoming [email protected].

At the moment I am getting the following errors when declaring Components

TS1238: Unable to resolve signature of class decorator when called as an expression.
  This expression is not callable.
    Type 'typeof import("C:/[redacted]/vue-ui/node_modules/vue-class-component/dist/vue-class-component")' has no call signatures.
    33 | import { Vue, Component, Prop } from "vue-property-decorator";
    34 |
  > 35 | @Component`
       |  ^^^^^^^^^
    36 | export default class SearchField extends Vue {

It seems to be working with the following syntax

import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import Breadcrumb, { BreadcrumbItem } from "@/components/portal/breadcrumb.vue";
import PageTitle from "@/components/portal/page-title.vue";

@Options({
  components: {
    Breadcrumb,
    PageTitle,
  },
})
export default class PageFrame extends Vue {
  @Prop() pageTitle!: string
  @Prop() breadcrumbItems!: BreadcrumbItem[]
}

How it looked like originally

import { Vue, Component, Prop } from "vue-property-decorator";
import Breadcrumb, { BreadcrumbItem } from "@/components/portal/breadcrumb.vue";
import PageTitle from "@/components/portal/page-title.vue";

@Component({
  components: {
    Breadcrumb,
    PageTitle,
  },
})
export default class PageFrame extends Vue {
  @Prop() pageTitle!: string
  @Prop() breadcrumbItems!: BreadcrumbItem[]
}

Further reading:

vuejs/vue-class-component#406

[ghost]

I am also getting the following warnings in the terminal

export 'default' (reexported as 'Component') was not found in 'vue-class-component' (possible exports: Options, Vue, createDecorator, mixins, prop, setup)

export 'default' (reexported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, 
createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)