Append Component programatically show error "Could not find defaults instance"

[mkidsc1603]

In Vue 2, I append component by Vue.extend({}) and it work fine,
I try to implement in Vue 3 & Vuetify 3, but it always show error

Error: [Vuetify] Could not find defaults instance
    at useDefaults (defaults.ts:25:24)
    at setup (defineComponent.tsx:55:24)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7204:29)
    at setupComponent (runtime-core.esm-bundler.js:7159:11)
    at mountComponent (runtime-core.esm-bundler.js:5508:13)
    at processComponent (runtime-core.esm-bundler.js:5483:17)
    at patch (runtime-core.esm-bundler.js:5085:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5622:21)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)

Appended Component
Notify.vue

<template>
  <v-snackbar v-model="innerValue" :timeout="innerTimeout" :color="innerColor">
    {{ text }}
  </v-snackbar>
</template>

<script>
import { defineComponent } from "vue";
import { useVModel, useReadOnly } from "@/composables/use-vmodel";

export default defineComponent({
  name: "Notify",
  props: {
    modelValue: Boolean,
    text: {
      type: String,
      default: () => "",
    },
    color: {
      type: String,
      default: () => "info",
    },
    timeout: {
      type: Number,
      default: () => 3000,
    },
  },
  emits: ["update:modelValue"],
  setup(props) {
    const innerValue = useVModel(props, "modelValue");
    const innerTimeout = useReadOnly(props, "timeout");
    const innerColor = useReadOnly(props, "color");

    return {
      innerValue,
      innerTimeout,
      innerColor,
    };
  },
});
</script>

Vue 3 Append Way

1: Use [mount-vue-component] Plugin
mount-vue-component github: https://www.npmjs.com/package/mount-vue-component

        const instance = getCurrentInstance();
        const comp = {
            props: ['title'],
            setup: (props) => () => h(Notify),
            unmounted() { console.log("Bye") },
            mounted() { console.log("Hi") }
        };
        comp.appContext = instance?.appContext ?? null


        const { vNode, destroy, el } = mount(comp, {
            props: {
                ...defaultProps,
                modelValue: true,
                color: "error",
                text,
            }
        });

2 : Use createVNode、render

        const vnode= createVNode(Notify, {
            ...defaultProps,
            modelValue: true,
            color: "error",
            text,
        });
        const tempDiv = document.createElement('div');
        render(vnode, tempDiv);
        document.body.appendChild(tempDiv)

Vue 2 Append Way

1: Vue.extend

        const ComponentClass = Vue.extend(Notify);
        let d = new ComponentClass({
            propsData: {
                value: true,
                color: "error",
                text,
                ...defaultProps
            }
        });

        d.$mount();
        document.getElementById("app").appendChild(d.$el);

Vesion

Vuetify Version: 3.0.0
Vue Version: 3.2.38
mount-vue-component Version : 0.10.2

[KaelWD]

Vue 2 needed new ComponentClass({ vuetify }), Vue 3 needs app.use(vuetify)

[mkidsc1603]

Oh! I realized.

update code here:

main.js already app.use(vuetify)

import App from '@/main'
import Notify from "@/components/Common/Notify.vue"
import { mount } from 'mount-vue-component'
const defaultProps = {
    timeout: 3000
}

export const useNotify = () => ({
    error: (text) => {
        const { vNode, destroy, el } = mount(Notify, {
            props: {
                ...defaultProps,
                // modelValue: true,
                color: "error",
                text,
            },
            app: App
        });
    }
})