Не удается добавить плагин в vue.js

Question

У меня проблемы с использованием vue-litebox (https://www.npmjs.com/package/vue-litebox),, и мне интересно, является ли это компонент, который ведет себя странно, или это я его неправильно реализую.

Я вижуэта ошибка в консоли:

[Vue warn]: Method "showLitebox" has already been defined as a data property.

Вот пример кода из vue-litebox документов:

import VueLitebox from 'vue-litebox' 

var app = new Vue({
  el: '#app',
  components: { VueLitebox },
  data: {
      images: [
          '/images/01.png',
          '/images/02.png',
          {
              title: 'My image title',
              src: '/images/03.png'
          }
      ],
      showLitebox: false
  },
  methods: {
      showLitebox() {
          this.showLitebox = true;
      },
      hideLitebox() {
          this.showLitebox = false;
      }
  }
})

<div id="app">
    <vue-litebox v-if="showLitebox"
        :items="images"
        @close="hideLitebox">
    </vue-litebox>
    <button type="button" @click="showLitebox">Show Litebox</button>
</div>

А вот как яреализовал это в моем пользовательском компоненте:

<template>
  <div id>
    <vue-litebox v-if="showLitebox" :items="images" @close="hideLitebox"></vue-litebox>
    <button type="button" @click="showLitebox">Show Litebox</button>
  </div>
</template>


<script>
import VueLitebox from "vue-litebox";

export default {
  components: { VueLitebox },
  data() {
    return {
      images: [
        "https://dummyimage.com/1600/ffffff/000000",
        "https://dummyimage.com/1600/ffffff/000000",
        {
          title: "My image title",
          src: "https://dummyimage.com/1600/ffffff/000000"
        }
      ],
      showLitebox: false
    };
  },
  methods: {
    showLitebox() {
      this.showLitebox = true;
    },
    hideLitebox() {
      this.showLitebox = false;
    }
  }
};
</script> 

<style scoped>
.image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px;
}
</style>

Answer 1

Предупреждение консоли указывает, что вы определили showLitebox более одного раза в <script>.Вы определили showLitebox как свойство данных и метод.Переименуйте одно из них, чтобы исправить проблему.

data() {
? showLitebox: false,
},
methods: {
? showLitebox() { ... }
}

И если вам интересно, почему litebox закрывается при нажатии next / prev , это вызваноошибка в компоненте, из-за которой закрывается при щелчках по корневому элементу .

demo