// Hidden Components
/* 
The Hidden Components Pattern involves splitting a complex component into smaller, more focused ones based on how it's used.
If different sets of properties are used together exclusively, it indicates potential for component division.
*/

<!-- Before Refactoring -->
<template>
  <!-- Really a "Chart" component -->
  <DataDisplay
    :chart-data="data"
    :chart-options="chartOptions"
  />

  <!-- Actually a "Table" component -->
  <DataDisplay
    :table-data="data"
    :table-settings="tableSettings"
  />
</template>

<!-- After Refactoring -->
<template>
  <Chart :data="data" :options="chartOptions" />
  <table :data="data" :settings="tableSettings" />
</template>