Bootstrap Select not working inside Bootstrap Vue Modal - vue.js

Question

I am using Bootstrap Vue with Bootstrap select and the select works perfectly outside the modal
It doesnt open at all inside the modal. Live code is HERE
JS file
Vue.component("suluct", {
template: "#suluct",
props: {
week: [String, Number],
year: [String, Number],
},
mounted() {
const $selectpicker = $(this.$el).find('.selectpicker');
$selectpicker
.selectpicker()
.on('changed.bs.select', () => this.$emit('changeWeek', this.options[$selectpicker.val()]));
},
updated() {
$(this.$el).find('.selectpicker').selectpicker('refresh');
},
destroyed() {
$(this.$el).find('.selectpicker')
.off()
.selectpicker('destroy');
},
computed: {
options() {
// run some logic here to populate options
return [
{
title: "Sunday",
value: "sunday",
}, {
title: "Monday",
value: "monday"
}
]
}
}
})
new Vue({
el: "#app"
})
HTML
<div id="app">
<suluct></suluct>
<div>
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<!-- Modal Component -->
<b-modal id="modal1" title="Bootstrap-Vue">
<suluct></suluct>
</b-modal>
</div>
</div>
<script type="text/x-template" id="suluct">
<select class="form-control selectpicker bs-select">
<option
v-for="(option, index) in options"
:key="index"
:value="option.value"
:selected="option.selected">
{{ option.title }}
</option>
</select>
</script>
The dropdown select wont open at all. Any help is appreciated

Answer 1

I had the same problem. After trying various ways, I found a solution.
When you wanna show modals, don not use v-b-modal directive.
Create a method, using this.$bvModal.show() to show modals.
And then you should use this.$nextTick([callback]) .
Final, use javascript to call bootstrap-select in the callback method
The method will be like
Html
<b-btn #click="ShowModal">Launch demo modal</b-btn>
Js
...
ShowModal() {
this.$bvModal.show('modal1');
this.$nextTick(()=>{
$('select').selectpicker();
})
},
...
ps:Sorry for my poor English and hope you can understand what I mean