how to work with v-select inside b-table?

Question

I'm working with v-select elements inside a b-table but i've a problem when i put the "responsive" property in my b-table. It looks as if the v-select is contained within the table even when I display the selection options and add a vertical scroll to my b-table too. This does not happen with the b-select components.

<b-row>
            <b-col sm="12">
                <b-table
                    responsive
                    select-mode="range"
                    :items="pago_cobro.detalle_operacion"
                    :fields="fieldsDetalle"
                    >
                    <template
                        v-slot:cell(det_pago_desc)="{
                            item,
                            field: { key },
                        }"
                    >
                        <div style="width: 150px">
                            {{item[key]}}
                        </div>
                    </template>
                    <template
                        v-slot:cell(det_codigo_efecto)="{
                            item,
                            field: { key },
                        }"
                    >
                        <v-select
                            v-model="item[key]"
                            style="width: 130px"
                            label="value"
                            size="21"
                            :reduce="(cod_efecto) => cod_efecto.value"
                            :options="cod_efecto"
                        >
                            <template
                                v-slot:selected-option="option"
                            >
                                {{ option.value }}
                            </template>
                            <template v-slot:option="option">
                                {{ option.value }} -
                                {{ option.text }}
                            </template>
                        </v-select>
                    </template>
                    <template
                        v-slot:cell(det_moneda)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-form-select
                            v-model="item[key]"
                            style="width: 80px;"
                            @change="changeMoneda(item)"
                            :options="monedas"
                        />
                    </template> 
                    <template
                        v-slot:cell(det_id_cta)="{
                            item,
                            field: { key }
                        }"
                    >
                        <v-select
                            v-model="item[key]"
                            style="width: 130px;"
                            label="plc_codigo"
                            size="21"
                            :reduce="(cuentas) => cuentas.id"
                            :options="cuentas"
                            @input="changeCtaContable(item,$event)"
                        >
                            <template
                                v-slot:selected-option="option"
                            >
                                {{ option.plc_codigo }}
                            </template>
                            <template v-slot:option="option">
                                {{ option.plc_codigo }} -
                                {{ option.plc_descripcion }}
                            </template>
                        </v-select>
                    </template>
                    <template
                        v-slot:cell(det_banco)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-form-select
                            v-model="item[key]"
                            style="width: 150px;"
                            :options="bancos"
                            :disabled="item.det_anexo!='BANCO'"
                        />
                    </template>                
                    <template
                        v-slot:cell(det_pago)="{
                            item,
                            field: { key },index
                        }"
                    >
                        <v-select
                            v-model="item[key]"
                            style="width: 130px"
                            label="value"
                            size="21"
                            :reduce="(medio_pagos) => medio_pagos.value"
                            :options="medio_pagos"
                            @input="changePago(item,index,$event)"
                        >
                            <template
                                v-slot:selected-option="option"
                            >
                                {{ option.value }}
                            </template>
                            <template v-slot:option="option">
                                {{ option.value }} -
                                {{ option.text }}
                            </template>
                        </v-select>
                    </template>
                    <template
                        v-slot:cell(det_nro_doc)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-input-group>
                            <b-form-input
                                v-model="item[key]"
                                style="width: 150px"
                                @keypress="onlyNumbers($event)"                                   
                            />                                
                        </b-input-group>
                    </template>
                    <template
                        v-slot:cell(det_monto)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-input-group>
                            <b-form-input
                                v-model="item[key]"
                                style="width: 100px"
                                @keypress="onlyNumbers($event)"
                                @keyup="sumaTotal()"                                 
                            />                                
                        </b-input-group>
                    </template>                                                             
                    <template #cell(actions)="row">
                        <b-button
                            size="sm"
                            class="btn-danger mr-1"
                            @click="deleteItem(row)"
                        >
                            <feather-icon icon="TrashIcon" />
                        </b-button>
                    </template>                         
                </b-table>                        
            </b-col>
        </b-row>

Screenshot of the problem

Answer 1

It caused overflow: scroll that provides responsive props b-table, you add attach prop to bind your select to v-app. I found an example of this.

<v-select
  v-model="item[key]"
  style="width: 130px"
  label="value"
  size="21"
  :reduce="(cod_efecto) => cod_efecto.value"
  :options="cod_efecto"
  attach
>
  <template
    v-slot:selected-option="option"
  >
    {{ option.value }}
  </template>
  <template v-slot:option="option">
    {{ option.value }} -
    {{ option.text }}
  </template>
</v-select>