טייפסקריפט - איך אני יכול לטפל נכון ב-Vue slots ב-Storybook

אני מנסה להפעיל את חריצי Vue ב-Storybook. כרגע אני בגרסת הבטא של Storybook v7, בגלל שהיו שינויים שעשו אותו טוב יותר עבור הפרויקט שלנו. אנחנו משתמשים ב-Vue 3 עם vite. אנחנו גם משתמשים ב-Typescript בכל מקום.

הבעיה היא שסטוריבוק לא נראה כאילו הוא נותן דרך קלה להוסיף תוכן לסלוט. הדרך היחידה היא דרך אובייקט ה-args, וגם אז אתה צריך משהו כזה כדי שזה יעבוד נכון:

const meta: Meta<typeof Modal> = {
    title: 'Componenten/Modal',
    component: Modal,
    render: (args: any) => ({
        components: { Modal },
        setup() {
            return { args };
        },
        template:
            '<Modal v-bind="args">' +
            '<template v-if="args.data" v-slot:data>' +
            '<div v-html="args.data" />' +
            '</template>' +
            '</Modal>',
    }),
};

export default meta;

type Story = StoryObj<typeof Modal>;

export const Modal: Story = {
    args: {
        title: 'Are you sure?',
        show: true,
        actions: [
            {
                buttonType: ButtonType.Remove,
                label: 'Yes, remove',
                link: () => {},
            },
            {
                label: 'Cancel',
                link: () => {},
            },
        ],
        data: "<a href={'/test'}>Hello world</a>",
    },
};

אני באמת חושב שזה מכוער ושצריך להיות אפשרות קלה יותר, אבל אני לא בטוח שיש אלטרנטיבה?

כמו כן, שמות הסלוטים אינם נמצאים בסוגי אובייקט ה-args, לכן עם קוד זה, TypeScript נותן שגיאת TS2322 שהשם של הסלוט אינו מאפיין של args. זה יכול לעבוד על ידי שימוש ב-any, אבל זה משהו שהייתי מעדיף לא לעשות.

מישהו יודע פתרון טוב יותר לזה?