Vue Mountable is a tiny DOM Library for Vue 3

npm i vue-mountable -D

import { VueMountable } from 'vue-mountable'

// created vue instance
app.use(VueMountable());

// main.vue

<script>
import { useComponent } from 'vue-mountable';
import test from 'components/test.vue';

export default {
	setup() {
		const { mount, destroy } = useComponent();

		function addTest() {
			mount(test, {
				props: {
					message: 'This is a Test Component'
				}
			});
		}

		return {
			addTest
		}
	}
}
</script>

// test.vue
<template>
	<div ref="test">
		{{ message }}

		<button @click.prevent="close">
			Remove Test Component
		</button>
	</div>
</template>

<script>
import { useComponent } from 'vue-mountable';

export default {
	name: 'test', // this needs to be defined
	props: {
		message: String
	},
	setup() {
		const test = ref(null); // template ref
		const { destroy } = useComponent();

		function close() {
			destroy(test.value);
		}

		return {
			close
		}
	}
}
</script>

const {
	mount, // mount function
	destroy, // destroy function
	destroyAll, // destroy all mounted elements
	id // current app instance id
} = useComponent();

mount(
	/**
	 * Vue Component File
	 * needs to have the "name" attribute
	*/
	component,
	{
		/**
		 * Native Vue Props
		 */

		props: {},

		/**
		 * Vue Children Components
		 * Array with Vue Components or Object array with Mount Options: component, children, props, target, slot
		 * @props {}
		 * @children []
		 * @target string
		 * @slot string
		 */
		children: [],

		/**
		 * Teleportation Target
		 * Can be defined in the loaded component or here
		 * Note: If the component has a target prop, it will override this option
		 * String referencing an DOM Target
		 */
		target : ''
	}
);

destroy(
	/**
	 * DOM Element
	 */

	element
);