Why is Bootstrap Js not working in my template?

Question

This is a question about how does it works more than how to fix it. I realy like to understand this.

So I'm working on a VueJS/Symfony project. And one of the thing I want to do is to use the bootstrap js component like collapse for exemple.

I do import bootstrap within my app and check if it is imported in my file.

//app.js
import $ from 'jquery'
window.$ = window.jQuery = $
import 'bootstrap'

if (typeof $.fn.popover == 'function') {
    alert('yolo') //works
}

//My view
{% block javascript %}
    {{ parent() }}
    <script>
        if (typeof $.fn.popover == 'function') {
            alert('yolo') //works
        }
    </script>
{% endblock %}

However this is not sufficient enough to make it work like I want on my view. For exemple the attribute related method will not work

<!-- This does not work -->
<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

By searching a bit I found out there is a library (I cannot use due to too much refactory work) which is doing this. Is there a specific reason ?

How does it works ? Is it due to webpack loader ? (I'm using Webpack Encore)