Reusable button for dropdown toggle (Vue and Laravel)

Question

I'm learning vue and i'm trying to build a reusable dropdown component. After hours of work i finally got it together and now i'm stuck because all i want is to pass the button name to my vue component.

This is my dropdown: https://imgur.com/StvEjyF

What I want is a way to pass the button name from my blade to the button.

My blade and only the string of the button name i'm trying to pass is not working:

            <Dropdown>

                <template slot="toggler">
                    <button>from blade</button>
                </template>

                <Dropdowncontent>
                    <Dropdownitems>Link1</Dropdownitems>
                    <Dropdownitems>Link2</Dropdownitems>
                </Dropdowncontent>
                
            </Dropdown>

My dropdown component which contains the button:

<template>
    <div class="relative" v-click-outside="onClickOutside">
        <slot name="toggler">
            <button
                @click="showCategories"
                class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 text-sm font-semibold lg:inline-flex lg:w-32"
            >
                from vue
            </button>
        </slot>

        <slot />
    </div>
</template>

I tried to accept it as a prop so I added props: [buttonName] to export default in my component and from the blade i added :buttonName="bla bla" to the dropdown tags but it doesn't update the {{buttonName}} in the component so this didn't work.

All i need is a way to pass only the button name from blade to vue because i don't want to create the button in the blade as it's my toggle for the dropdown content and items