laravel + vue.js + boostrapを使用したハンバーガーナビの作成方法

Question

laravel 5.5 vue.js 2系 bootstrap 3系 でスマホの際にハンバーガナビを実装しようとしています。
単一コンポーネントでSPAページを実装する際に使用しています。
vue-router等も使用しています。

PCの描写の場合、loginとaboutのリンクが表示されますが、スマホの幅で見るとハンバーガーナビが出るのですが、
ハンバーガーナビが動かず、ナビが開きません。

resources/assets/js/bootstrap.js　にて、

window.$ = window.jQuery = require('jquery');
 
require('bootstrap-sass');

という形でJquery等は読み込んでおります。
chromeのデベロッパーツールで見るととくにエラーは出ていません。

どのような原因が考えられるでしょうか。
bootstrapでのナビ部分の知識についてもあまりありません。

よろしくお願いいたします。

↓ナビ部分

<!-- header -->
<header class="header">

<nav class="menu navbar navbar-default navbar-static-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">メニュー</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<router-link to="/" class="navbar-brand">Home</router-link>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right dropdown-menu">
				<router-link to="login">login</router-link>
				<router-link to="about">about</router-link>
			</ul>
		</div>

</div><!-- container -->
</nav>

</header>

<router-link to="/" class="navbar-brand">Home</router-link>
の部分はaタグに直して考えていただいて大丈夫です。

Answer 1

Bootstrap3のナビゲーションのコンポーネントを利用するには、Jquery以外にBootstrap3用のJavaScriptファイルの読み込みも必要です。
Laravelから一度離れて、HTMLファイルとBootstrap3単体でまずは動作を確認してみて下さい。
Bootstrap3 Getting started

bootstrap.min.js

CDNだと以下にあります。
BootstrapCDN

ナビゲーション自体は以下などが参考になるかと思います。
Bootstrap3 日本語リファレンス

後継のBootstrap4が正式にリリースされているので、特別な理由がなければBootstrap4の利用も検討してみて下さい。
ドキュメントもより使いやすいように進化しています。
Bootstrap 4
Bootstrap 4 Examples

Answer 2

申し訳ありません。
app.jsでbootstrap.jsを読み込んでいませんでした。

申し訳ありませんでした。