Vue Custom dropdown not showing on modal - css

Question

I've installed a module from https://desislavsd.gitbook.io and used it for my custom modal. However I have trouble the dropdown is not overlapping and stuck in here even adjusting z-index:999 does not do anything.
I also tried to make adjustments to the height but upon clicking the custom component but doesn't work because if I already make the height of the modal higher before the dropdown list is shown it would leave a big space below they dropdown which is not friendly looking.
Custom module https://jsfiddle.net/desislavsd/es2n6py0/
Either adjusting the height of the modal onclick will do or overlapping the dropdown as long as the lists are shown.
<div class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9" v-if="getSelectedFilterType == 'connectivity'">
<div class="filter-header">
<h6>Connectivity</h6>
<div class="filter-close-btn" #click="hideModal('')">
<i class="fa fa-times fa-lg" aria-hidden="true"></i>
</div>
</div>
<div class="row pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
<p class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available to All Tenants</p>
<v-select v-model="selected.browsers" as="name:id:id" :from="browsers" tagging :tag-keys="[9,32,188]"></v-select>
</div>
</div>
-------------------------------------------------------------------------
<!-- Inspector code -->
<div data-v-796ce895="" class="filter-body-w-auto shadows-box p-0 col-lg-5 col-md-6 col-sm-9">
<div data-v-796ce895="" class="filter-header">
<h6 data-v-796ce895="">Connectivity</h6>
<div data-v-796ce895="" class="filter-close-btn">
</div>
</div>
<div data-v-796ce895="" class="row filter-tags pt-1 px-2 mt-0 mb-2 mx-1 justify-content-evenly">
<p data-v-796ce895="" class="text-dark text-start mt-1 mb-0 mx-0 py-1 px-0" style="font-size: 100%;">Available
to All Tenants</p>
<div data-v-796ce895="" tabindex="-1" class="v-select -empty -multiple">
<div class="v-select-bar">
<div class="v-select-inp-group"><input placeholder="Search.." class="v-select-inp"><button type="button"
tabindex="-1" class="v-select-btn-clear"></button><button type="button" tabindex="-1"
class="v-select-btn-dd"></button><button type="button" tabindex="-1"
class="v-select-btn-spinner"></button></div>
</div>
<div class="v-select-list">
<span class="v-select-option">Internet Explorer</span>
<span class="v-select-option">Firefox</span>
<span class="v-select-option">Chrome</span>
<span class="v-select-option">Opera</span>
<span class="v-select-option">Safari</span>
<span class="v-select-option">Opera3</span>
<span class="v-select-option">Opera2</span>
<span class="v-select-option">Opera2</span>
<span class="v-select-option">Opera1</span>
<span class="v-select-option">Opera11</span>
</div>
</div>
</div>
</div>
CSS
.filter-body-w-auto[data-v-796ce895] {
display: inline-block;
z-index: 99;
background: white;
border-radius: 6px;
box-shadow: 4px 4px 4px rgb(0 0 0 / 20%);
top: 400px;
transform: translate(-50%, 0);
overflow: hidden;
position: fixed;
height: 500px;
max-height: 100%;
}
.filter-header[data-v-796ce895] {
background: #466cb3;
padding: 10px 17px;
color: #FFF;
width: 100%;
text-align: left;
}
3rd party css module: https://github.com/desislavsd/vue-select/blob/master/dist/vue-select.css
Btw I also have used some bootstrap classes in here mixed with custom styles
Awkward design but another possible solution if overlap does not work