Nuxt.js bootstrap4のcarouselでカードレイアウトがうまくスライドされません。

bootstrap4のcarouselでカードレイアウトがうまくスライドされません。

【起きている事象】

PCの表示だと正常に動作しますが、
スマホ表示（iphone10のみで確認済み）だと次のスライドのボタンをクリックすると、次の表示するスライドが２回連続して動いて表示されてしまう（2回ボタンを押したような動き）。

【実現させたいこと】

次のスライドのボタンをクリックすると、次のスライドを正常に動かせたい。

【該当のソース component/nagare.vue】

Nuxt.js
1<template>
2  <div class="container">
3    <div id="carousel-card2" class="carousel slide" data-interval="false">
4        <ol class="carousel-indicators carstyle-sm">
5          <li data-target="#carousel-card2" data-slide-to="0" class="active">
6          1
7          </li>
8          <li data-target="#carousel-card2" data-slide-to="1">
9          2
10          </li>
11          <li data-target="#carousel-card2" data-slide-to="2">
12          3
13          </li>
14          <li data-target="#carousel-card2" data-slide-to="3">
15          4
16          </li>
17
18        </ol>
19        <div class="carousel-inner px-3 pt-3">
20            <div class="carousel-item px-3 pt-3 active">
21                <div class="row justify-content-center">
22                <div class="col-12">
23                    <div class="card shadow-sm">
24                    <div>
25                        <img src="~/assets/img/junjo/uketuke.jpg" width="400" height="270" class="img-fluid card-img-top" alt="受付">
26                        <div class="card-img-overlay pt-2 pl-2">
27                            <p class="badge text-white" style=" background-color: #c72875;"><small class="mr-1">STEP</small>1</p>
28                        </div>              
29                    </div>
30                    <div class="card-body">
31                        <h5 class="card-title">受付</h5>
32                        <p class="card-text">◇◇◇◇◇◇</p>
33                    </div>
34                    </div>
35                </div>
36                </div>
37            </div>
38
39            <div class="carousel-item px-3 pt-3">
40                <div class="row justify-content-center">
41                  <div class="col-10 col-offset-1">
42                      <div class="card shadow-sm">
43                        <div class="relative">
44                            <img src="~/assets/img/junjo/sejutu.jpg" width="400" height="270" class="img-fluid" alt="施術">
45                            <p class="badge text-white absolute" style=" background-color: #c72875;"><small class="mr-1">STEP</small>7</p>
46                        </div>
47                        <div class="card-body">
48                            <h5 class="card-title">施術</h5>
49                            <p class="card-text">◇◇◇◇◇◇</p>
50                            <ul class="nayami-pick">
51                            <li><small><a href="/sejutsu/kotsuban_sebone_kyousei">骨盤コース</a></small></li>
52                            <li><small><a href="/sejutsu/shinsoukin_kinmaku_tyousei">調整コース</a></small></li>
53                            <li><small><a href="/sejutsu/koutsuujikotiryou">事故治療コース</a></small></li>
54                            <li><small><a href="/sejutsu/sangokotsuban_kyousei">矯正コース</a></small></li>
55                            <li><small><a href="/sejutsu/cupping">ピングコース</a></small></li>
56                            <li><small><a href="/sejutsu/insurance">保険診療</a></small></li>
57                            </ul>
58                        </div>
59                      </div>
60                  </div>
61                </div>
62            </div>
63
64            <div class="carousel-item px-3 pt-3">
65                <div class="row justify-content-center">
66                  <div class="col-12">
67                      <div class="card shadow-sm">
68                        <div>
69                            <img src="~/assets/img/junjo/monshin.jpg" width="400" height="270" class="img-fluid card-img-top" alt="治療計画">
70                            <div class="card-img-overlay pt-2 pl-2">
71                                <p class="badge text-white" style=" background-color: #c72875;"><small class="mr-1">STEP</small>8</p>
72                            </div>
73                        </div>
74                        <div class="card-body">
75                            <h5 class="card-title">治療計画</h5>
76                            <p class="card-text">◇◇◇◇◇◇</p>
77                        </div>
78                      </div>
79                  </div>
80                </div>
81            </div>
82            <div class="carousel-item px-3 pt-3">
83                <div class="row justify-content-center">
84                    <div class="col-12">
85                      <div class="card shadow-sm">
86                        <div>
87                            <img src="~/assets/img/junjo/kaikei.jpg" width="400" height="270" class="img-fluid card-img-top" alt="会計">
88                            <div class="card-img-overlay pt-2 pl-2">
89                                <p class="badge text-white" style=" background-color: #c72875;"><small class="mr-1">STEP</small>9</p>
90                            </div>
91                        </div>
92                        <div class="card-body">
93                            <h5 class="card-title">会計</h5>
94                            <p class="card-text">◇◇◇◇◇◇</p>
95                        </div>
96                      </div>
97                    </div>
98                </div>
99            </div>
100        </div><!--carousel-inner end-->
101        <div class="car-box align-content-center">
102            <a class="carousel-control-prev" href="#carousel-card2" role="button" data-slide="prev">
103            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
104            <span class="sr-only">Previous</span>
105            </a>
106            <a class="carousel-control-next" href="#carousel-card2" role="button" data-slide="next">
107            <span class="carousel-control-next-icon" aria-hidden="true"></span>
108            <span class="sr-only">Next</span>
109            </a>
110        </div>
111    </div>
112  </div>
113</template>
114