We are building a Vue3 application that is divided into two distinct interfaces—one that is tabular and the other that is organized in visual modules.

We are considering structuring our file tree in two different ways to maintain separation of components/concerns. Which is more ideal between the following two ways?

The conventional way:

- root
  - components
    - shared
    - app1
    - app2
  - pages
    - shared
    - app1
    - app2

With everything related to a particular interface separately name-spaced:

- root
  - apps
    - app1
      - components
      - pages
    - app2
      - components
      - pages
  - components
  - pages