Невозможно использовать API-интерфейс hooper в проекте vue

Question

Я использовал Hooper для успешного создания карусели в моем проекте vue, и я хочу запустить метод hooper.update (), чтобы правильно изменить размер элементов карусели, потому что иногда карусель будет применяться ширину 0 пикселей для элементов карусели (что не предназначено).

Соответствующий код:

<template>
<hooper ref="carousel" :settings="hooperSettings">
  <slide v-for="(item, index) in cards" :key="index">
    <custom-card :card="item"></listing-card>
  </slide>
  <hooper-navigation slot="hooper-addons"></hooper-navigation>
</hooper>
<v-btn @click="resize()"></v-btn>
</template>

<script>
  import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper';
  components: {ListingCard, Hooper, Slide, HooperNavigation},
  data () {
    let data = {
      hooperSettings: {
        itemsToShow: 1,
        breakpoints: {
          600: {
            itemsToShow: 2
          },
          960: {
            itemsToShow: 3
          },
          1264: {
            itemsToShow: 4,
          }         
        }
      },
   }
   return data;
 },

 methods : {
   resize(){
     this.$refs.carousel.update();
   }
 }
</script>

Когда срабатывает метод изменения размера, я получаю консольную ошибку «this. $ refs. carousel.update не является функцией ". Я не уверен, чего не хватает в моем коде, поскольку API hooper предоставляет примеры, в которых элементу hooper присваивается опора ref, на которую имеется ссылка в методе, запускающем обновление.

Как я могу запустить hooper. способ обновления?