UPD. How to use third party js file in VueJs?

Question

Vue.js

UPD. added Html sources and scripts.
Hello.
I am learning components in VueJs. I can already create a simple component. I decided to expand my knowledge, but a difficulty arose:
There is a simple html page that I took as a sample and which I want to translate into Vue component
https://codesandbox.io/embed/waves-cff0x
But when I create a component, nothing happens.
My actions: I include
the main sine-waves.min.js file
And, the code from the script.js file:

spoiler

var waves = new SineWaves({
  el: document.getElementById('waves'),
  
  speed: 5,
  
  ease: 'SineInOut',
  
  wavesWidth: '75%',
  
  waves: [
    {
      timeModifier: 4,
      lineWidth: 5,
      amplitude: -25,
      wavelength: 25
    }
    
  ],
 
  // Called on window resize
  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");
    
    var index = -1;
    var length = this.waves.length;
    while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }
    
    // Clean Up
    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

- I put it in Sinus.vue
Here is the code of the Sinus.vue component:

spoiler

<template>
<div>
    <canvas ref="waves"></canvas>
    <h1>Компонент</h1>
</div>
</template>

<script>
    import "@/js/sine-waves.min.js"
    export default {


    mounted(){

        let waves = new SineWaves({
            el: document(this.$refs.waves),

            speed: 5,

            ease: 'SineInOut',

            wavesWidth: '75%',

            waves: [

                {
                    timeModifier: 4,
                    lineWidth: 5,
                    amplitude: -40,
                    wavelength: 40
                }
            ],

            // Called on window resize
            resizeEvent: function() {
                var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
                gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
                gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
                gradient.addColorStop(1,"rgba(255, 255, 25, 0");

                var index = -1;
                var length = this.waves.length;
                while(++index < length){
                    this.waves[index].strokeStyle = gradient;
                }

                // Clean Up
                index = void 0;
                length = void 0;
                gradient = void 0;
            }
        });
    }
    };
</script>

I just can't figure out how to add third-party files correctly? In Html - just registered the placement paths and it works.

Answer 1

I don’t know what sine-waves has, but the wrapper in the module is written crookedly, but you have an error in the component
document is a function?
https://codesandbox.io/s/vue-template-04x15

Answer 2

When exporting/importing an object in Vue(Nuxt), the contents of the object are supplemented with service data - how to do it right? - read the answers and comments to them - it seems like this is the same problem, just from a slightly different angle