How to structure better code components in directories?

Question

So the question is how to structure components in directories, what design pattern is better to follow?

Answer 1

You are approching this the wrong way. Vue is a lib for creating UI components, it's not a CRUD / REST MVC framework.

So the answer is: the design of your UI determines how many components you have to create and which have to be side-by-side, which have to be nested in each other etc.

This image from the React docs gives you an idea about how to think (alsothough the example is maybe a bit to fine-grained):

source: https://facebook.github.io/react/docs/thinking-in-react.html#step-1-break-the-ui-into-a-component-hierarchy