Vue.js 何时将代码拆分为 Nuxt 中的组件

我正在用Vue、Nuxt和vuetify编写一个项目，作为UI库.

在我的索引页面中，我必须用幻灯片和 carousel 显示许多静态内容和图像.我已经对它进行了编码，除了我的索引之外，一切都很好.页面目录中的vue文件看起来很凌乱，我觉得里面的代码行太多了.

例如，我有以下代码用于在index.vue中显示 carousel :

<v-carousel 
          height="90vh"
          vertical
          vertical-delimiters="right"
          interval="9000"
          cycle
          :show-arrows="false"
          hide-delimiter-background
        >
          <v-carousel-item
            v-for="(item,i) in carouselItems" :key="i"
            :src="item.src"
            reverse-transition="scroll-y-transition"
            transition="scroll-y-transition"
          >
              <div
                class="d-flex transition-fade-in white--text"
                style="height: 100%;background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9));"
              >
                  <v-row
                    class="fill-height pb-9 mx-5 flex-column"
                    align="start"
                    justify="end"
                  >
                    <div class="text-h3 white--text d-block mb-2">
                      {{ item.title }}
                    </div>
                    <div class="text-h6 white--text mx-1 text-justify"> {{ item.description }} </div>
                  </v-row>
              </div>
          </v-carousel-item>
        </v-carousel>

现在我的问题是，我应该将这些代码分离成一个组件，并将选项和项目作为props 传递给该组件，还是应该保持原样，让一个页面组件包含多行代码？