Nuxtで動的な背景を利用する、mounted()より先にhead()を処理させる

Question

前提・実現したいこと

nuxtで作成しているページの背景にTrianglifyを利用したいです。
Trianglifyとは → http://qrohlf.com/trianglify/

かなり情報が少なく、苦戦しています。

まず、生のhtml、jsで利用することには成功しました。
code pen → https://codepen.io/kou72/pen/yLNdzqL?editors=1010
(外部ライブラリを読み込んでいます、Settings → JS で確認できます)

次にnuxt(vue)で同様のことを実現しようとして、ある程度は実現できました。
code sandbox → https://codesandbox.io/s/upbeat-mcclintock-nsjys
(layout → default.vue に書いてます)
ただときどき成功するものの、大半はエラーで表示に失敗します。
cdnのキャッシュを持っているとエラーなく表示できるようです。

※画像でよくね？は一旦なしでお願いします笑

コードを見てもらいたいのですが、
mounted()で実行される処理よりhead()が後に処理されているため、エラーとなっているようです。

発生している問題・エラーメッセージ

vue.runtime.esm.js?2b0e:1888 ReferenceError: Trianglify is not defined
    at VueComponent.addTriangleTo (default.vue?ec86:23)
    at VueComponent.mounted (default.vue?ec86:18)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)

該当のソースコード

<script>
export default {
  mounted() {
    this.addTriangleTo(document.getElementById('sample'))
  },
  methods: {
    addTriangleTo(target) {
      const dimensions = target.getClientRects()[0]
      const pattern = Trianglify({
        width: dimensions.width,
        height: dimensions.height + 220,
        x_colors: 'GnBu',
        palette: Trianglify.colorbrewer,
        variance: 0.4
      })
      target.style['background-image'] = 'url(' + pattern.png() + ')'
    }
  },
  head() {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js' },
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js' }
      ]
    }
  }
}
</script>

試したこと

上に書いたものと重複になりますが

生html、jsで実現
code pen → https://codepen.io/kou72/pen/yLNdzqL?editors=1010

nuxtで失敗
code sandbox → https://codesandbox.io/s/upbeat-mcclintock-nsjys

npmでも提供されているようですが、こちらはさらに使い方がわかりません
github → https://github.com/qrohlf/trianglify
例 → https://github.com/qrohlf/trianglify/blob/master/examples/basic-web-example.html

vue-trianglifyというのもあるのですが、こちらは本当に全然情報がなく、思うようには使えませんでした
https://www.npmjs.com/package/vue-trianglify

補足情報（FW/ツールのバージョンなど）

バージョン情報を載せておきます。

> node --version
v12.12.0

> vue --version
2.9.6

> npm list --depth=0
├── @nuxt/typescript-build@0.6.1
├── @nuxt/typescript-runtime@0.4.1
├── @nuxtjs/eslint-config-typescript@1.0.2
├── @nuxtjs/eslint-module@1.1.0
├── @nuxtjs/vuetify@1.11.0
├── babel-eslint@10.1.0
├── eslint@6.8.0
├── eslint-config-prettier@6.10.1
├── eslint-plugin-nuxt@0.5.2
├── eslint-plugin-prettier@3.1.2
├── eslint_d@8.1.1
├── firebase-tools@7.16.1
├── node-sass@4.13.1
├── npm@6.14.4
├── nuxt@2.12.1
├── prettier@1.19.1
├── trianglify@3.0.0
└── typescript@3.8.3

Answer 1

自己解決しました。
nuxt.config.jsの方に書き込むことで解決しました

  head: {
+   script: [
+     { src: 'https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js' },
+     { src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js' }
+   ]
  },