Custom Input Vue 3 Composition API

This is BaseInput.vue's template, as you know in Vue3 we have $attrs (fallthrough props) that we can specify where to bind prop value as below I bind it to element with the intention of customize css style for input element.
BaseInput.vue

<template>
  <label :class="$style.wrapper">
    <input
      v-bind="$attrs"
      :value="modelValue"
    />
    <span :class="$style.label">
      <slot name="label"></slot>
    </span>
  </label>
</template>

Then I call

<BaseInput
  v-model="username"
  :class="$style.field"
  />
<BaseInput
  v-model="password"
  :class="$style.field"
  / >

So basically the class field will be applied to <input/ > element in BaseInput.vue component thanks to v-bind='$attrs'. But sometimes, I want to add css style for the wrapper element of BaseInput.vue (here is element). For example:

  margin-bottom: 32px;

I want the first has margin bottom = 32px, but the second one doesn't. So what is the good way to achive that?

I just found a solution that we add a div wrapper for each but I think it's not really good idea. So please elaborate me.