Как осуществить подключение внешнего файла *.js к компоненту *.vue?

Задача. Есть картинка в img, сам тег лежит в родительском блоке .grid__item-img
Вот сайт с ховером, который нужно добавить на картинку. Помимо hover.js подключается еще three.js.
Ошибку пишет, что hoverEffect is not defined. Либо вообще не отрабатывает данный скрипт

Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {
      const imgs = Array.from(el.querySelectorAll('img'));

      new hoverEffect({
        parent: el,
        intensity: el.dataset.intensity || undefined,
        speedIn: el.dataset.speedin || undefined,
        speedOut: el.dataset.speedout || undefined,
        easing: el.dataset.easing || undefined,
        hover: el.dataset.hover || undefined,
        image1: imgs[0].getAttribute('src'),
        image2: imgs[1].getAttribute('src'),
        displacementImage: el.dataset.displacement
      });
});

sizmailov, эта библиотека - простой js файл старой версии, не ES модуль.

Попробуйте подключить её, используя exports-loader.

Полезная ссылка: Export from old school libraries in Webpack.

При этом ей требуется также подключать ещё пару либ, THREE, например.

Вообще, учитывая, что сам hover.js довольно маленький, и не является npm пакетом, я бы предложил просто переписать его на ES модуль: добавить в него явный импорт threejs и tween (которые, конечно, надо установить через npm install), и добавить явный экспорт нужной функции hoverEffect.

Но библиотека напрямую манипулирует DOM, и скорее всего эффект будет слетать при каждом ререндере. Тут надо либо как-то шаманить с v-once и вешать эффект после рендера, либо перезапускать эффект при каждом ререндере...