Astro for design system + Vue for interactivity, is this correct approach?

I’m building my first real website, and I’d like some architectural advice.

I’m using Astro to build a small design system: buttons, inputs, cards, surfaces, typography, etc, and they look great. I really like this workflow for styling and layout.

Now I want to add interactivity like modals, forms, notifications and API-requested content. For that, I started using Vue islands inside Astro via ant-design-vue package which provides all I need except one thing.

When I create a Vue component (for example, a modal), I can’t directly reuse my beautiful Astro components inside Vue like:

<template>
<Button ="open = true">Open form</Button>

<Modal v-if="open">
<Input v-model="name" />
</Modal>
</template>

<script setup>
import { ref } from "vue";
const open = ref(false);
const name = ref("");
</script>

But of course, Astro components don’t run in the browser, so this doesn’t work (and yes, Button, Input, etc is not just div with styles and can't be replaced by simple css class).

So, now I doubt about this entire approach. Is it correct? What about best practices? How real projects combine astro and interactivity?

Thanks!