Bootstrap4にてdropdownが動かない

現在Laravel&Vue.jsを用いてサービス作成をしております。サービスの中で、Laravel側でBootstrap4をCDNを用いてインストールを行い、その後、Bootstrap4ののdropdown機能をVue.jsで動かそうとしております。しかし、Bootstrap4自体はインストールされているようですが,dropdownVue.jsで動かしたいdropdownが機能しておらず、困っております。

以下はコードになります。

Laravel
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6  <!-- <meta http-equiv="x-ua-compatible" content="ie=edge"> -->
7  <meta name="csrf-token" content="{{ csrf_token() }}">
8  <title>
9    @yield('title')
10  </title>
11  <!-- Font Awesome -->
12  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
13  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
14  <!-- mix関数-->
15  <link rel="stylesheet" href="{{ mix('/css/app.css') }}" type="text/css">
16  <!-- Bootstrap4.5.2 core CSS -->
17  <link rel="stylesheet"
18    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
19    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
20    crossorigin="anonymous"
21  >
22</head>
23
24<body>
25  <div id="app">
26    @yield('content')
27  </div>
28  <!-- mix関数 -->
29  <script src="{{ mix('js/app.js') }}"></script>
30
31  <!-- JQuery -->
32  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
33    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
34    crossorigin="anonymous">
35  </script>
36  <!-- popper.js -->
37  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
38    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
39    crossorigin="anonymous">
40  </script>
41
42  <!-- Bootstrap4.3.1 core Javascript -->
43  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
44    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
45    crossorigin="anonymous">
46  </script>
47</body>
48
49</html>
50

Vue
1<div class="dropdown">
2          <button type="button" id="dropdown1"
3              class="btn btn-secondary dropdown-toggle"
4              data-toggle="dropdown"
5              aria-haspopup="true"
6              aria-expanded="false">
7            Dropdown button
8          </button>
9          <div class="dropdown-menu" aria-labelledby="dropdown1">
10              <a class="dropdown-item" href="#">Menu #1</a>
11              <a class="dropdown-item" href="#">Menu #2</a>
12              <a class="dropdown-item" href="#">Menu #3</a>
13          </div>
14      </div>

僕自身は以下のことを試してみました。
１、CDNからJQuery、popper.js、Bootstrapのjsとcssを読み込み済みです。それでもエラーが発生しております。
２、Bootstrapのdropdownの記述は公式のコードをほぼコピペしているため、入力ミスはなさそうです。
３、Bootstrapのバージョン3などに変えてみましたが、変化なしです。
４、BootstrapCDNからJavaScriptとJavaScript Bundleの両方を貼り付けてみました。1回目のクリックでdropdownは動きはしましたが、一度dropdownを閉じて再びクリックすると動かなくなります。
そもそもJavascript Bundle自体がJavaScriptにpopper.jsを導入したものであるという記事を拝見したため、記述として汚いと思いこの書き方自体をやめました。
BootstrapCDN ：　https://www.bootstrapcdn.com/

以上を基に、どのような原因が考えられるか教えていただけないでしょうか？

補足
いくつか僕自身で考えられる原因を上げておきます。検証次第こちらに追記していきます。
・現状1つのコンポネントに複数のdropdownを用いているため、複数利用のエラーが発生しているのか？
→関係なかったです。当たり前ですよね。。。
・popper.jsが読み込まれていない？