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">
The final Vue component is like this, and I strive to reduce the depth of hierarchy in it.