используя vuejs, чтобы открыть все панели bootstrap 4 гармошки

Question

У меня есть bootstrap 4 аккордеона. Я хочу, чтобы при нажатии кнопки просто открывались все панели одновременно. Мне нужно, чтобы это работало с vue. js, так как там написан метод вместо jquery. Также был бы полезен способ сделать это без функций стрелок. Я применил v-on: нажмите на кнопку, но хочу, чтобы эта функция вызывалась здесь. У меня есть jquery код, который люди использовали с ним, но он используется bootstrap - vue, и я не хочу загружать дополнительную библиотеку.

new Vue({
  el: "#app",
  data: {
  
  },
  methods: {
  	open: function(){
    alert("this");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

        


    <div id="app">
    



                                        <div class="col-9 offset-3">
                                            <h4 class="text-primary title">accordion test</h4>
                                            <div class="accordion" id="accordion1">
                                              <div class="card">
                                                <div class="card-header" id="headingOne">
                                                  <h2 class="mb-0">
                                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">
                                                      Job Title
                                                    </button>
                                                  </h2>
                                                </div>
                            
                                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion1">
                                                  <div class="card-body">
                                                        <p>{{selectedJob.Name.JobTitle}} interviewed November 2019</p>
                                                  </div>
                                                </div>
                                              </div>
                                              <div class="card">
                                                <div class="card-header" id="headingTwo">
                                                  <h2 class="mb-0">
                                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                            sucessess
                                                    </button>
                                                  </h2>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion1">
                                                  <div class="card-body">
                                                        <blog-articles :dates-articles='datesArticles' v-if="isDataLoaded"></blog-articles>
                                                  </div>
                                                </div>
                                              </div>
                                              <div class="card">
                                                <div class="card-header" id="headingThree">
                                                  <h2 class="mb-0">
                                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" >
                                                           location
                                                    </button>
                                                  </h2>
                                                </div>
                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion1">
                                                  <div class="card-body">
                                                        <blog-articles2 :dates-articles2='datesArticles2' v-if="isDataLoaded2"></blog-articles2>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                            
                                            </div>
                                            <button v-on:click="open">Open all
                                            </button>
                                     
                                  </div>