Как использовать скользящий слайдер в vuejs?

Question

У меня есть файл для компонента, которому нужен слайдер.Вот как у меня инициализируется пятно.

import Slick from 'vue-slick'

components: { Slick },
data() {
  return {
    slickOptions: {
      //options can be used from the plugin documentation
      slidesToShow: 4,
      infinite: true,
      accessibility: true,
      adaptiveHeight: false,
      arrows: true,
      dots: true,
      draggable: true,
      edgeFriction: 0.30,
      swipe: true
    }
  }
},
// All slick methods can be used too, example here
methods: {
  next() {
    this.$refs.slick.next()
  },
  prev() {
    this.$refs.slick.prev()
  },
  reInit() {
    // Helpful if you have to deal with v-for to update dynamic lists
    this.$refs.slick.reSlick()
  }
}

Но я получаю несколько ошибок.

1 - ошибка Ошибка синтаксического анализа: неожиданный токен.

2 - Сборка модуля не удалась(из ./node_modules/babel-loader/lib/index.js): SyntaxError: неожиданный токен (122: 21).

Может ли кто-нибудь подсказать мне, как использовать slick в vuejs?Я использовал Slick ранее в JQuery.

webpack.config.js код

  module.exports = function (config, { isClient, isDev }) {
    module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file-loader'
      }
    ]
  }
  build: {
    extend (config, { isServer }) {
      if (isServer) {
        config.externals = [
          require('webpack-node-externals')({
            whitelist: [/^vue-slick/]
          })
        ]
      }
    }
  }
  return config
}