Рендеринг vue-carousel-3d только после нажатия кнопки «осмотреть» в chrome-dev-tool

Question

Я использую VueJS 2.5.3.Vue-carousel-3d не рендерится, пока я не нажму «Осмотреть» (инструмент Google Dev).После нажатия он рендерит как я не буду.Кроме того, я заметил, что «события» в Vue.data вычисляются как я не хочу.'/ api / afisha / это мой собственный api для отдыха, его работа корректна.

это мой экземпляр vue и HTML-шаблон.Помоги мне, пожалуйста!

это мое мнение, инста

new Vue({
  el: '#ttt',

  data: {
    events: [],
  },
  beforeCreate: function(){
    vm = this
        axios.get('/api/afisha/').then(function(response){
                vm.events = response.data
                console.log(response)
            });

  },
       components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }, 
  delimiters: ["[[","]]"]
});

<div id="ttt" class="container-fluid screen-2 panel" style="top: calc(1*100%);">
      <div class="promo-slid">
  <p>Подивіться на наших котят!</p>
</div>
<div class="slider">
  <carousel-3d :controls-visible="true" :controls-prev-html="'&#10092;'" :controls-next-html="'&#10093;'" 
               :controls-width="30" :controls-height="60" :clickable="false">
    <slide v-for="(event, i) in events" :index="i">
      <figure>
        <img v-bind:src="event.images">
      </figure>
    </slide>
  </carousel-3d>
</div>
</div>

Answer 1

Согласно документу Vue о beforeCreate

Вызывается синхронно сразу после инициализации экземпляра, перед наблюдением данных и настройкой события / наблюдателя.

Если API работает так быстро, поскольку инициализаторы наблюдателей или структур данных не инициализированы, vm.events = response.data может быть переопределено процессом установки компонента.

Я думаю, что вам лучше вызывать API в created hook

Вызывается синхронно после создания экземпляра.На этом этапе экземпляр завершил обработку параметров, что означает следующее: наблюдение данных, вычисленные свойства, методы, обратные вызовы наблюдения / события

Обновлено

Согласно документу, вам нужно пропустить реквизиты count, чтобы активировать реактивные данные

  <carousel-3d :controls-visible="true" :controls-prev-html="'&#10092;'" :controls-next-html="'&#10093;'" 
               :controls-width="30" :controls-height="60" :clickable="false" :count="events.length">
    <slide v-for="(event, i) in events" :index="i" :key="i">
      <figure>
        <img v-bind:src="event.images">
      </figure>
    </slide>
  </carousel-3d>

Демо https://codesandbox.io/s/4jvnmz2n27