Vue make input function as button, or add required attribute to button - vue.js

Question

I have a custom component in Vue that is a multiple selection. Due to the way this was created, I am having difficulties validating that at least one option has been selected. As currently, the component uses a button, that when toggled opens a popup/dropdown for the user to select some options. But I cannot figure out how to validate this. I have tried replacing this button with other components such as <input> and <select> but nothing seems to work.
This is where I am currently at:
<div
:id="'multiple-selection' + customFieldId"
class="dropdown multiple-selection"
>
<input
type="button"
class="form-control dropdown-toggle"
data-type="Multiple Selection"
:id="customFieldId"
:value="localValues"
:required="required"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
/>
<div
:id="'multiple-selection-options' + customFieldId"
:name="'multiple-selection-options' + customFieldId"
class="dropdown-menu multiple-selection-options-wrapper"
style="/*width: calc(100% - 40px)*/"
>
<a
v-for="fOption in options.split(',').map(option => option.trim())"
class="dropdown-item cursor-pointer three-dots-text"
#click="selectOption(fOption)"
#click.stop
>
<input
class="cursor-pointer"
type="checkbox"
:id="'checkbox-' + fOption + customFieldId"
value="fOption"
:checked="localValues.includes(fOption)"
/>
<span :for="'checkbox-' + fOption + customFieldId">
{{ fOption }}
</span>
</a>
</div>
</div>
My current issues with this implementation are that I am unsure how to display the options in the input when selected, or a None selected placeholder when none are, and then of course, when they click save, the browser popup should tell them that it is a required field.