title: When to split a Vue component into multiple components (sub components)
body: <p>When creating Vue components, how does one decide when to separate out a component into a parent component with multiple child components versus just having a single component with more logic?</p>
  
  <p>I am using Vue in a few places on a non-SPA website. On one of the pages of the site I need to display a list of items, with some icons next to each item to do some simple things like show/hide. I am building the list as a Vue component, lets call it ProductList. But I am not sure whether to make each item within that list a separate component or not. When is it appropriate to split a component into multiple sub components?</p>
  
  <p>My own reasoning tells me that components should only be created for things that need to be able to stand alone. Since the items are not going to be used outside of a list, there is no point in having them a separate ProductListItem component to put inside the ProductList component. I should just have all the code in the ProductList component. Right?</p>
  
  <p>But when I look at other examples on the internet, many of them tell a different story. For instance, I recall seeing an example where there was an Article component, an ArticleTitle component, an  ArticleBody component, and an ArticleEnd component (or something like this). The template of the Article Component had <code>&lt;article-title&gt;</code>, <code>&lt;article-body&gt;</code> and <code>&lt;article-end&gt;</code> within it. If an ArticleTitle component or an ArticleBody component is only going to be used inside the Article component, not standalone, why bother having it be a separate component? Am I missing something here? Is there a technical criteria on which to base the decision of whether to have multiple components or is it just personal preference?</p>