What problem does this feature solve?

It would provide the support in SFC playground of the vue-class-component syntax like this:

<template>
  <div>
    <p>{{ greeting }} World!</p>
    <Comp ref="comp" />
  </div>
</template>

<script lang='ts'>
import Comp from './Comp.vue';
import { Options, Vue } from "vue-class-component";
import { ref, ComponentPublicInstance } from "vue";
@Options({
  components: {
    Comp
  },
})
export default class MyApp extends Vue {
  comp = ref<ComponentPublicInstance<Comp>>();
  mounted(): void {
    this.comp.value.goodbye();
  }
}
</script>

Currently, I am facing an issue only with this syntax but I can't create a reproducer in SFC playground

What does the proposed API look like?

Provide an import of the vue-class-component module in the import map or document the URL somewhere if it already exists so that we can have in the import map something like:

{
  "imports": {
    "vue": "https://sfc.vuejs.org/vue.runtime.esm-browser.js"
    "vue-class-component": "https://sfc.vuejs.org/vue-class-component.runtime.esm-browser.js"
  }
}

• The playground uses sucrase for transpiling TS in browser, which does not support decorators.

• Vue class component is no longer recommended, so the playground has no plan in supporting it.