Nuxt.jsで外部JS内のメソッドを実行する方法が分かりません。

Question

以下のCodepenの動作をNuxt.jsで実装したいと思っております。

https://codepen.io/team/keyframers/pen/ZMRMEw

CodepenのSettingのところで外部JSと外部CSSが読み込まれていたので、Nuxt.jsのhead内でで読み込みました。
その後、CodepenのScriptの部分にあるコードをNuxt.jsのmounted内に記載してみたのですが、ScrollOut is not definedとSplitting is not definedが表示されます。

こちらを動作させるにはどのようにしたら良いのでしょうか？

<template>
  <div>
      <!-- codepenのhtmlの部分をコピーして貼り付け -->
      <section class="intro-section">
        <h1 class="intro-heading"> Watch</h1>

        <p>The latest in time-telling technology.</p>
      </section>
      <section class="content-section" data-scroll>
        <figure class="figure">
          <img src="https://source.unsplash.com/bl_NUhqLC8o/800x800" />
        </figure>

        <div class="content">
          <header class="header">
            <div class="subheading">All-Old Techniques</div>
            <h2 class="heading">Not Evolved,<br />not transformed either.</h2>
          </header>
          <p class="paragraph">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum
            nisi illum rem recusandae. Tempore consequuntur nihil cumque quis
            nam deserunt earum atque et ullam facere accusamus cum natus, autem
            numquam.
          </p>
        </div>
      </section>
  </div>
</template>

<script>
export default {
  mounted() {
    console.clear()
    ScrollOut({
      cssProps: {
        visibleY: true,
        viewportY: true,
      },
    })
    Splitting({ target: '.heading' })
  },
  head() {
    return {
      script: [
        {
          src: 'https://unpkg.com/scroll-out@2.2.2/dist/scroll-out.min.js',
        },
        {
          src: 'https://unpkg.com/splitting/dist/splitting.min.js',
        },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/splitting/dist/splitting.css',
        },
      ],
    }
  },
}
</script>

<style lang="scss">
// CodepenのSCSSをそのまま貼り付け
</style>