純粋に本来のアトミックデザインの分類に従うと以下のようになる。
- 原子（Atom）: 最も小さい粒度の要素
- 分子（molecule）: 2つ以上の原子を組み合わせたシンプルなUI要素
- 有機体（organism）: 切り離して単体でも機能する分子の集まり
- テンプレート（Templates）: いくつかの有機体・分子・原子から成り立っている骨組み
- ページ（Pages）: テンプレートに実際のコンテンツを適用したもの
これをVue Componentに愚直に当てはめていくと以下のような不利益が生まれる。
- 機能上はAtomだが見た目上はMoleculeというコンポーネントが生まれてしまう。矢印アイコンを持つSelect要素など。
- 見た目で判断してしまうとpropsやeventの管理が破綻しがち。
- 固有のstateとmethodを持てる/持てない分類の境目が不明瞭。