How hide collapse on vue-bootstrap on window resize? - vue.js

Question

I want to close collapse when resize the window.
var app = new Vue({
el: '#app',
created() {
window.addEventListener('resize', this.hideCollapse)
},
destroyed() {
window.removeEventListener('resize', this.hideCollapse)
},
methods: {
hideCollapse() {
console.log('hide collapse')
// what should I call to make the collapse hide
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
<b-collapse id="collapse-1-inner" class="mt-2">
<b-card>Hello!</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>

Answer 1

Add a data property called open and bind it to v-model directive of b-collapse component then update inside the resize event callback :
var app = new Vue({
el: '#app',
data() {
return {
open: false
}
},
created() {
window.addEventListener('resize', this.hideCollapse)
},
destroyed() {
window.removeEventListener('resize', this.hideCollapse)
},
methods: {
hideCollapse() {
console.log('hise collapse')
this.open=true
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- App -->
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
<b-collapse v-model="open" id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
<b-collapse id="collapse-1-inner" class="mt-2">
<b-card>Hello!</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>