Accessing inner Elements of a VUE Component

Hello Everyone, so right now I want to make a button component with an arrow inside it, so thats the button component that I have:

ArrowButton:

<template>
<button type="button" class=" w-80 flex-wrap text-white bg-blue-700 hover:bg-blue-800 pr-5  text-sm  pl-3 py-2.5 text-center inline-flex items-center ">

<slot></slot>

<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</button>
</template>

if I want to increase the width between the button text and arrow, I need to increase the margin inside the svg element inside the button.

When I simply want to use the ArrowButton in my page I would do this:

<ArrowButton class: ml-20>The name of the button</ArrowButton>

but what I want to do is being able to manipulate the tailwind class of the SVG element inside the button so that I can custom define the distance between the arrow and the button text whenever I want to suite different cases

so, my question is how do I access the SVG properties from the implementation instead of editing the component file? even if there is a way to avoid doing that altogether by altering the structure of the ArrowButton component I want to know if there is a way to access the inner elements of a vue component at implementation.

thank you very much.