Custom directive to wrap one component into another - vue.js

Question

I create a component whose purpose is to display an arbitrary component within itself, with a changeable padding property. (The example is conditional for simplicity).
<script setup lang="ts">
defineProps<{
innerComponent: any;
settings: { padding: number; backgroundColor: string };
}>();
</script>
<template>
<div
:style="`
padding: ${settings.padding}px;
background-color: ${settings.backgroundColor}`"
>
<component :is="innerComponent" />
</div>
</template>
Let's create a simple component for the example.
<template>
<p style="background-color: beige">it's just a test.</p>
</template>
That's how we use it, and it works great.
<script setup lang="ts">
import ExternalComponent from "./components/ExternalComponent.vue";
import InnerComponent from "./components/InnerComponent.vue";
</script>
<template>
<ExternalComponent
:inner-component="InnerComponent"
:settings="{ padding: 200, backgroundColor: 'yellow' }"
/>
</template>
I wish it all looked even more aesthetically pleasing. For example, like this.
<InnerComponent v-inner="{ padding: 200, backgroundColor: 'yellow' }" />
Let's try using custom directives.
import { createApp, h } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.directive("inner", (el, binding, vnode) => {
//Here is supposedly expected to be something like
el.outerHTML = h("ExternalComponent", {
innerComponent: vnode,
settings: binding.value,
});
//or
vnode = h("ExternalComponent", {
innerComponent: vnode,
settings: binding.value,
});
//But, of course, something completely different :((
});
app.mount("#app");
Unfortunately, my knowledge is not enough to solve this problem. I would be glad to get any advice on what direction to dig.