Проблема с вызовом метода анимации из другого файла на Vue.js

Всем привет) У меня появилась проблема, изучаю Vue.js. Начал переписывать код своего сайта портфолио и столкнулся с проблемой вызова анимации из экземпляра Vue. Если в файле main.js использовать такую конструкцию:

const SquaresAnimate = require('./squares_animate');
SquaresAnimate.Animate();

То анимация работает

Собственно сам код анимации (полностью рабочий)

module.exports = class SquaresAnimate{
  static Animate(){
    const cnv = document.querySelector('.greeting__canvas');
    const ctx = cnv.getContext('2d');
    const width = document.querySelector('.greeting__animate');

    console.log(width.offsetWidth);

    let cw, ch, cx, cy;

    //Растягивание блока по ширине и высоте
    function resizeCanvas(){
      cw = cnv.width= width.offsetWidth;
      ch = cnv.height= width.offsetWidth;
      cx = cw/2; //Центр по x
      cy = ch/2; //Центр по y
    }
    resizeCanvas(); //Вызов функции для растягивания блока
    window.addEventListener('resize', resizeCanvas); //Вызов функции resizeCanvas при изменении размера окна
  
    //Свойства анимации
    const cfg = {
      hue         : 0,   //Изменение цвета
      bgFillColor : `rgba(70, 70, 70, .1)`,
      dirsCount   : 6,   //Количество направлений
      stepToTurn  : 8,  //Шаги до поворота
      dotSize     : 2,   //Размер частиц
      dotsCount   : 300, //Количество частиц
      dotVelocity : 2,   //Скорость частицы
      distance    : cw/12,  //Дистанция до исчезновения частицы
      gradientLen : 5,   //Зависимость изменения цвета, от отдаления от центра
      gridAngle   : 45,  //Угол наклона аниации
    };

    //Отрисовка на холсте
    function drawRect(color, x, y, w, h, shadowColor, shadowBlur, gco){
      //ctx.globalCompositeOperation = gco; //Режим наложения (осветление)
      //ctx.shadowColor = shadowColor || 'black'; //Затемнение 
      ctx.shadowBlur = shadowBlur || 1; //Размер тени
      ctx.fillStyle = color; //Цвет заливки
      ctx.fillRect(x, y, w, h); //Залив точки
    }

    //Создание точки
    class Dot{
      constructor(){
        this.pos = {x:cx, y:cy}; //Координаты точки
        this.dir = cfg.dirsCount === 6 ? (Math.random() * 3 | 0)*2 : Math.random()*cfg.dirsCount | 0; //Выбор направления движения
        this.step = 0; //Количество шагов
      }

      //Метод отображения точки на экране
      redrawDot(){
        let xy = Math.abs(this.pos.x - cx) + Math.abs(this.pos.y - cy); //Абсолютное значение xy
        let makeHue = (cfg.hue + xy / cfg.gradientLen) % 360; //Текущий оттенок
        let blur = cfg.dotSize - Math.sin(xy / 8) * 2; //Размер тени
        let color    =`hsl(${ makeHue }, 100%, 50%)`; //Цвет частицы
        let size = cfg.dotSize; // - Math.sin(xy / 8) * 2 - Math.sin(xy / 2); //Размеры частицы
        let x = this.pos.x - size/2; //Координаты частицы
        let y = this.pos.y - size/2; //Координаты частицы
        drawRect(color, x, y, size, size, color, blur, 'lighter');
      }

      //Функция изменения положения
      moveDot(){
        this.step++; //Изменение количества шагов
        //случайное значение из createDirs() * скорость
        this.pos.x+= dirsList[this.dir].x * cfg.dotVelocity; //Изменение по x
        this.pos.y+= dirsList[this.dir].y * cfg.dotVelocity; //Изменение по y
      }

      //Метод изменения направления
      changeDir() {
        if (this.step % cfg.stepToTurn === 0) {
          //Если Math.random() > 0.5, то (прибавим к направлению 1) % коли-во направлений : (иначе прибавим кол-во направлений убавив 1) % кол-во направлений
          this.dir = Math.random() > 0.5 ? (this.dir + 1) % cfg.dirsCount : (this.dir + cfg.dirsCount - 1) % cfg.dirsCount;
        }
      }

      //Удаление частицы
      killDot(id){
        //Процент = случайность * экспонента^(шаги/дистанцию)
        let percent = Math.random() * Math.exp(this.step / cfg.distance);
        //Если процент больше 100, то удалим точку
        if (percent > 100){
          dotsList.splice(id,1); //Удаление частицы (удаление одного элемента)
        }
      }
    }

    let dirsList = []; //Массив координат
    //Функция изменения направления частиц
    function createDirs() {
      for (let i = 0 ; i < 360 ; i+= 360 / cfg.dirsCount) {
        let angle = cfg.gridAngle + i;
        let x = Math.cos(angle * Math.PI / 180);
        let y = Math.sin(angle * Math.PI / 180);
        dirsList.push({x: x, y: y}); //Запись новых координат
      }
    }
    createDirs();

    let dotsList = []; //Массив хранения частиц
    //Добавление частиц
    function addDot() {
      if (dotsList.length < cfg.dotsCount && Math.random() > 0.8) {
        dotsList.push( new Dot() ); //Добавление точки
        cfg.hue = (cfg.hue + 1) % 360 ; //Изменение оттенка частицы
      }
    }

    //Применение у точкам её методы
    function refreshDots() {
      dotsList.forEach((i, id) => { 
        i.redrawDot();
        i.moveDot();
        i.changeDir();
        i.killDot(id); //Удаление частицы
      });
    }

    //Главная функция
    function loop() {
      drawRect(cfg.bgFillColor, 0, 0, cw, ch, 0, 0, 'normal'); //Заливка
      addDot();
      refreshDots();
      requestAnimationFrame(loop); //Циклирование loop
    }
    loop(); //Вызов loop
  };
};

Сам блок в html, где это все вырисовывается

<div class="greeting__animate">
    <canvas class="greeting__canvas"></canvas>
</div>
<!-- /.greeting__animate -->

Но если подключить в Vue.js и попытаться вызвать этот же метод, то анимация перестает срабатывать. Код ниже:

const SquaresAnimate = require('./squares_animate');

//Подключение vue: npm i -s vue 
const Vue= require("vue");

//Создание экземпляра vue
new Vue({
    //Указывает в какой элемент вмонтировать Vue
    el: "#app",
    //Объект data
    data:{
    },
    //Методы
    methods:{},
    //Инициализация методов, при загрузке страницы
    created(){
        SquaresAnimate.Animate();
    }
})

Появляется такая картина

Подскажите, может делаю что-нибудь не так? Может вызов метода засовываю не туда? Остальной js код с Vue работает нормально.