JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://cdn.rawgit.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js"></script>
<div class="top">
  <div id="app" class="main">
    <div class="tabs">
      <div class="tabs-body">
        <div class="deploy">
          <div class="another-wrapper">
            <div class="logs">
              <div class="logs">
                <div class="main">
                  <div v-for="item in list">
                    <div class="item">
                      {{item.label}}
                    </div>
                  </div>
                  <infinite-loading :on-infinite="onInfinite"
                                    :distance="1"
                                    ref="infiniteLoading">
                  </infinite-loading>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.top {
  height: 100px;
  overflow-x: hidden;
  border: 1px solid #ccc;
}

.main {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.tabs {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.tabs-body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.deploy {
    flex-grow: 1;
    overflow: auto;
}

.item {
  padding: 10px;
  border: 1px solid red;
}

JavaScript

var comp = new Vue({
    el: '#app',
    data: {
    	array: [
      	{label: 'one', value: 1},
        {label: 'two', value: 2},
        {label: 'three', value: 3},
        {label: 'four', value: 4},
        {label: 'five', value: 5},
        {label: 'six', value: 6},
        {label: 'seven', value: 7},
        {label: 'eight', value: 8},
        {label: 'nine', value: 9},
        {label: 'ten', value: 10},
        {label: 'one', value: 1},
        {label: 'two', value: 2},
        {label: 'three', value: 3},
        {label: 'four', value: 4},
        {label: 'five', value: 5},
        {label: 'six', value: 6},
        {label: 'seven', value: 7},
        {label: 'eight', value: 8},
        {label: 'nine', value: 9},
        {label: 'ten', value: 10},
        {label: 'one', value: 1},
        {label: 'two', value: 2},
        {label: 'three', value: 3},
        {label: 'four', value: 4},
        {label: 'five', value: 5},
        {label: 'six', value: 6},
        {label: 'seven', value: 7},
        {label: 'eight', value: 8},
        {label: 'nine', value: 9},
        {label: 'ten', value: 10},
        {label: 'one', value: 1},
        {label: 'two', value: 2},
        {label: 'three', value: 3},
        {label: 'four', value: 4},
        {label: 'five', value: 5},
        {label: 'six', value: 6},
        {label: 'seven', value: 7},
        {label: 'eight', value: 8},
        {label: 'nine', value: 9},
        {label: 'ten', value: 10},
        {label: 'one', value: 1},
        {label: 'two', value: 2},
        {label: 'three', value: 3},
        {label: 'four', value: 4},
        {label: 'five', value: 5},
        {label: 'six', value: 6},
        {label: 'seven', value: 7},
        {label: 'eight', value: 8},
        {label: 'nine', value: 9},
        {label: 'ten', value: 10}
      ],
      list: []
    },
    methods: {
      onInfinite () {
        console.log('INIT', this.$refs);
        // I assue that no data at the beginning and I am waiting when...