jQuery.Deferred exception: this is undefined PerfectScrollbar@webpack-internal in VueJS

I imported PerfectScrollbar into my project then things started getting weird. Afer hours of debugging I was able to figure out that the problem is likely from PerfectScrollbar. What could I have done wrong?

Error below:

jQuery.Deferred exception: this is undefined PerfectScrollbar@webpack-internal:///./node_modules/perfect-scrollbar/dist/perfect-scrollbar.js:1150:5
@webpack-internal:///./src/assets/js/apps/todoList.js:158:85
mightThrow@webpack-internal:///./node_modules/jquery/dist/jquery.js:3762:29
resolve/</process<@webpack-internal:///./node_modules/jquery/dist/jquery.js:3830:12
setTimeout handler*resolve/<@webpack-internal:///./node_modules/jquery/dist/jquery.js:3868:16
fire@webpack-internal:///./node_modules/jquery/dist/jquery.js:3496:31
fireWith@webpack-internal:///./node_modules/jquery/dist/jquery.js:3626:7
fire@webpack-internal:///./node_modules/jquery/dist/jquery.js:3634:10
fire@webpack-internal:///./node_modules/jquery/dist/jquery.js:3496:31

My code:

import PerfectScrollbar from 'perfect-scrollbar/dist/perfect-scrollbar.js';

new PerfectScrollbar('.task-text', {
    wheelSpeed: .5,
    swipeEasing: !0,
    minScrollbarLength: 40,
    maxScrollbarLength: 300,
    suppressScrollX: true
  });