如何在vuetify timeline中使用虚拟滚动

我正在使用vuetify框架中的vuetify timeline组件。

嗨,我有一个类似于vuetify timeline的示例( https://codepen.io/luizalves/pen/bGoxEvz?editors=101 ).

我的问题是,当有很多项目时,向下滚动时dom需要很长时间来呈现时间线项目。

我怎么能用v-virtual-scroll来解决这个问题,或者像延迟加载这样的东西呢?

密码

    <div id="app">
      <v-app id="inspire">
        <v-timeline
          align-top
          :dense="$vuetify.breakpoint.smAndDown"
        >
          <v-timeline-item
            v-for="(item, i) in items"
            :key="i"
            :color="item.color"
            :icon="item.icon"
            fill-dot
          >
            <v-card
              :color="item.color"
              dark
            >
              <v-card-title class="text-h6">
                Lorem Ipsum Dolor
              </v-card-title>
              <v-card-text class="white text--primary">
                <p>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</p>
                <v-btn
                  :color="item.color"
                  class="mx-0"
                  outlined
                >
                  Button
                </v-btn>
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-app>
    </div>

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        items: [
          {
            color: 'red lighten-2',
            icon: 'mdi-star',
          },
          {
            color: 'purple darken-1',
            icon: 'mdi-book-variant',
          },
          {
            color: 'green lighten-1',
            icon: 'mdi-airballoon',
          },
          {
            color: 'indigo',
            icon: 'mdi-buffer',
          },
        ],
      }),
    })