What should be the structure of a vue project with an admin panel?

Question

Vue.js

I am planning to create a project with vue.
The project consists of several pages of the site and the admin panel.
After reviewing several projects on github, I can’t draw a conclusion about the general structure, everyone somehow does it differently.
It's about the src directory.
Page 1 :

src:
--|__ ...
--|__ components
------| __ Button.vue
------| __ Dropdown.vue
------| __ .............
--|__ layout/dashboard
------| __ content.vue
------|__ ...............
--|__ pages (view)
--|__ ...

Page 2 :

src:
--|__ ...
--|__ components
------| __ Button.vue
------| __ Dropdown.vue
------| __ .............
--|__ pages (view)
------|__ layout/dashboard
--|__ ...

Page 3 :

src:
--|__ ...
--|__ components
------| __ pages (view)
-------------| __ .............
------| __ dashboard
------------| __ .............
------| __ uicomponents
-------------| __ Button.vue
-------------| __ Dropdown.vue
-------------| __ .............
--|__ ...

Which of these is correct? It is clear that everything is different for everyone, but maybe there is some general rule for the structure of the project?!
Do I understand correctly that components are independent objects that can be used on different pages (in different places on the page): button, navigation, popup, other
pages or views are project pages.
layout is the basis for the same type of pages, admin, main

Answer 1

Do I understand correctly that components are independent objects that can be used on different pages (in different places on the page): button, navigation, popup, etc.

Yes
Yes
Almost. The layout stores what you use on each page (header, footer, etc.)
I myself use the first option - it seems to me the most convenient and readable. And in almost all the projects where I worked, it was like that.
Well, one more ball in favor of the first option is that nuxt.js has such a folder structure