I try to work with Accordion in Vue with lots of content and therefore i try to get the event 'shown.bs.collapse'

I broke it down to...

HTML

<div id="app">

    <!--Accordion wrapper-->
    <div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

        <!-- Accordion card -->
        <div class="card">

            <!-- Card header -->
            <div class="card-header" role="tab" id="headingOne">
                <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <h5 class="mb-0">
                        Collapsible Item #1 <i class="fa fa-angle-down rotate-icon"></i>
                    </h5>
                </a>
            </div>

            <!-- Card body -->
            <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                <div class="card-body">
                    Collapse 1
                </div>
            </div>
        </div>
        <!-- Accordion card -->

        <!-- Accordion card -->
        <div class="card">

            <!-- Card header -->
            <div class="card-header" role="tab" id="headingTwo">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <h5 class="mb-0">
                        Collapsible Item #2 <i class="fa fa-angle-down rotate-icon"></i>
                    </h5>
                </a>
            </div>

            <!-- Card body -->
            <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="card-body">
                    Collapse 2
                </div>
            </div>
        </div>
        <!-- Accordion card -->

    </div>
    <!--/.Accordion wrapper-->

</div>

JS i tried Basic JQuery:

$('.collapse').on("shown.bs.collapse", function(){alert('Shown')});

And over Vue:

new Vue({
    el:"#app",
    data:{
    },
    methods:{
        doSomethingOnShown(){
            alert('shown');
        }
    },
    mounted(){
        $(this.$refs.collapseOne).on("hidden.bs.modal", this.doSomethingOnShown);
        $(this.$refs.collapseTwo).on("hidden.bs.modal", this.doSomethingOnShown);
    }
});


But somehow it is not working... Any idea?