Vue.jsのperfect-scrollbarがうまく実装できません

前提・実現したいこと

はじめて利用させていただきます。
使い方が間違っていたり、説明不足などありましたら申し訳ありません。

jQueryの代わりにVue.jsがオススメと聞いて触り始めたばかりの初心者です。
こちらを参考に実装しようと思ったのですがうまくいきません。

該当のソースコード

ナビ部分はこちらを参考にしており、意図した通りに動いています。
vue2-perfect-scrollbarはCDNで読み込んでいます。

html
1<nav id="global-nav">
2	<perfect-scrollbar>
3		<ul>
4			<li><js-accordion>
5				<a slot="title">あいうえお</a>
6				<ul class="sjs-accordion--body" slot="body">
7					<li><a href="">あいうえお１</a></li>
8					<li><a href="">あいうえお２</a></li>
9				</ul>
10			<js-accordion></li>
11			<li><js-accordion>
12				<a slot="title">かきくけこ</a>
13				<ul class="sjs-accordion--body" slot="body">
14					<li><a href="">かきくけこ１</a></li>
15					<li><a href="">かきくけこ２</a></li>
16				</ul>
17			<js-accordion></li>
18			<li><a href="">さしすせそ</a></li>
19			<li><js-accordion>
20				<a slot="title">たちつてと</a>
21				<ul class="sjs-accordion--body" slot="body">
22					<li><a href="">たちつてと１</a></li>
23					<li><a href="">たちつてと２</a></li>
24				</ul>
25			<js-accordion></li>
26		</ul>
27	</perfect-scrollbar>
28</nav>

js
1//ナビ部分は省略します
2const PerfectScrollbar = window['Vue2PerfectScrollbar'];
3Vue.use(PerfectScrollbar);
4new Vue({
5  el: '#global-nav',
6});

CSSで「スクロールバー付きのコンテンツの高さの指定が必須」とあったのですが指定しても動きませんでした。
(マウスオーバーでスクロールバー自体は表示されますが、スクロールバー動きません)
また、上記の通り高さが固定ではないのですが、可変の場合はそもそも不可能なのでしょうか？
可能であればどのようにしたら良いでしょうか？
調べ方が悪いのか１日悩んでも無理だったため、お知恵を拝借したく質問させていただきました。
よろしくお願いいたします。