What problem does this feature solve?

In vue2 it was be easy:

<template>
 <button :class="type"><slot /></button>
</template>

<script>
 export default {
   name: 'Button',
   props: [ 'type' ],
 }
</script>

import Button from 'Button.vue'
import Vue from 'vue'

var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()

instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)

extend create instance. But in vue3 it's has been deleted. Where are another way?

What does the proposed API look like?

Like vue2

You can do this: https://github.com/vuejs/vue-next/issues/629#issuecomment-700549376

BTW you shouldn't mount components inside other already mount component like you are showing in Vue 2