Had exactly the same question when I started working on rebuilding a new landing page, using Vue. I have gone through several stages of refactoring all the codes, and the rule of thumb is readability over reusability.

Just like splitting a large code block up into several functions with descriptive names - bigblind

Stage 1: Every page as a component, as how they are used in router. So, each page is a large chunk of codes

Stage 2: Every repeating part as a components, as I don't want to copy and paste the codes, i.e. same as what you are doing.

Stage 3: Every section as a component, as I started to think writing HMTL as writing functions.

  <div class="landingpage careers">
    <section class="landingpage-hero">
      <app-navbar></app-navbar>
      <landingpage-header></landingpage-header>
    </section>

    <main class="landingpage-main">
      <div class="desktop-section-row">
        <punchline-section></punchline-section>
        <benefits-section></benefits-section>
      </div>
      <personas-section></personas-section>
      <values-section></values-section>
      <contact></contact>
    </main>

    <app-footer></app-footer>
  </div>

The final Vue component is like this, and I strive to reduce the number of hierarchy in it.

Had exactly the same question when I started working on rebuilding a new landing page, using Vue. I have gone through several stages of refactoring all the codes, and the rule of thumb is readability over reusability.

Just like splitting a large code block up into several functions with descriptive names - bigblind

Stage 1: Every page as a component, as how they are used in router. So, each page is a large chunk of codes

Stage 2: Every repeating part as a components, as I don't want to copy and paste the codes, i.e. same as what you are doing.

Stage 3: Every section as a component, as I started to think writing HMTL as writing functions.

  <div class="landingpage careers">
    <section class="landingpage-hero">
      <app-navbar></app-navbar>
      <landingpage-header></landingpage-header>
    </section>

    <main class="landingpage-main">
      <div class="desktop-section-row">
        <punchline-section></punchline-section>
        <benefits-section></benefits-section>
      </div>
      <personas-section></personas-section>
      <values-section></values-section>
      <contact></contact>
    </main>

    <app-footer></app-footer>
  </div>

The final Vue component is like this, and I strive to reduce the depth of hierarchy in it.