Nuxtなどのフレームワークのコンポーネントで静的なJSファイルを読み込みたいです

Question

以下の様にあるコンポーネントで静的なJSファイルを読み込んで記述されたロジックを使用したいです。

head() {
    return {
      script: [
        {
          src: '/hoge/test.js',
          async: true,
        },

上記の方法だとheadに読み込ませる事になると思いますが、そのコンポーネント上のみで使いたい場合この様な方法で良いのでしょうか？

フレームワークを使わないjsであればhtml上で以下の様に読み込むものをNuxtなどのフレームワークで実装したいです。

<script src="/hoge/test.js"></script>

上記のheadに読み込む方法だと読み込んだjsファイルの中で変数を宣言している場合、再度そのコンポーネントがレンダリングされる場合再度そのjsファイルが読み込まれるのが原因か
Uncaught SyntaxError: Identifier '変数' has already been declared
になってしまったりします。

やりたい事としては、あるコンポーネント上で静的ファイルを読み込み、以下の様にtemplate上に記述したdivのIDをみてそのdivに読み込んだjsから操作を行いたいです。

<template>
 <div id="hoge" class="huga"></div>
</template>

この様なパターンではどの様にjsを読み込み使用するのが良いのでしょうか？ご存知の方いらっしゃいましたらご回答いただけますと大変助かります。