Когда разделять компонент

Question

Я сомневаюсь, когда мне следует разделить компонент на более мелкие.

Документация Vue рекомендует это

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

Является ли это рекомендуемым

<template>
  <home-section-wrapper>
    <home-section-title v-once v-text="title"/>
    <home-section-img :src="img" :alt="imgAlt"/>
    <home-section-text v-once v-text="text"/>
    <home-section-action :to="actionTo" :label="actionLbl" />
  </home-section-wrapper>
</template>

HomeSection - это компонент с заголовком, изображением, текстом и ссылкой для другой страницы, каждый компонент содержит 20 строк кода.

Другой пример

<template>
  <div class="banner" :style="backgroundImg">
    <div class="banner__content">
      <h1 class="banner__title" v-text="title"/>
      <h2 class="banner__subtitle" v-text="subtitle"/>
    </div>
    <div class="banner__action">
      <slot/>
    </div>
  </div>
</template>

На этот раз с Содержанием, заголовком, подзаголовком и ссылкой в ​​одном компоненте из 100 строк.