Komponenty w Vue.js

Witam mam pytanko jaka jest dobra praktyka tworzenia komponentów ?
Załóżmy , że mamy taką podstronę i teraz tak podzielić to na 3 komponenty czy może na 1 czy może w ogóle jak wy to robicie?

<template>
  <section class="app-bandit">
    <h1 class="app-bandit__heading">Jednoręki bandyta</h1>
    <div class="app-bandit__colors">
      <div class="app-bandit__color"></div>
      <div class="app-bandit__color"></div>
      <div class="app-bandit__color"></div>
    </div>
    <div class="app-bandit__action">
      <input type="number" placeholder="Podaj stawkę" class="app-bandit__rate">
      <button class="app-bandit__spin">Zakręć</button>
    </div>
    <div class="app-bandit__statisctics">
      <div class="divide">
        <div class="app-bandit__money">Money:</div>
        <div class="app-bandit__spins">Spins:</div>
      </div>
      <div class="divide">
        <div class="app-bandit__wins">Wins:</div>
        <div class="app-bandit__lose">Lose:</div>
      </div>
    </div>
  </section>
</template>

Ja jestem zdania ze komponenty sie dzieli na (przyklad):

• header
• footer
• component per page
• reusable components
• smart (aka container components) i dump compontents
• wieksze komponenty dziele na male jesli ma sens, czyli jesli template jest duzy lub po prostu logika tego oczkuje

Nie widze potrzeby rozbijania wszystkiego na komponenty bo raz mamy tysiac plikow, dwa nic to nie daje jesli nie jest popartym jakas argumentacja, trzy szkoda na to czasu jesli nie ma sensu.