Vue component with customisable HTML element using "as" prop

App.vue

<script setup lang="ts">
import Drawer from './components/Drawer.vue';
</script>

<template>
    <div class="app-wrapper">
        <Drawer position="left" :open="true" as="header">
            <p>Stuff goes here</p>
        </Drawer>
        <main class="page-content">
            <!-- route outlet -->
            <RouterView :key="$route.path"></RouterView>
        </main>
    </div>
</template>

<style scoped lang="scss">
	// Styles
</style>;

Drawer.vue

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
	props: {
		position: String as PropType<'left' | 'right'>,
		open: Boolean,
		as: String as PropType<keyof HTMLElementTagNameMap>
	},
	data() {
		return {
			position: this.position ?? 'left',
			open: this.open ?? false,
			as: this.as ?? 'div',
		};
	}
});
</script>;

<template>
	<component :is="as" :class="['drawer',`drawer--${position}`, open && 'drawer--open']">
		<slot></slot>
	</component>
</template>


<style scoped lang="scss">
	// Styles
</style>;