Recently I am writing a small web chat application, with a main interface and a chat page. The content is not complicated. The first time I tried to write with Vue, I divided the personal information at the head of the main interface, the list in the middle, the friend category switching at the bottom, and the text of the chat interface opened by clicking on the list item, the message panel, etc., all into separate components.
But this seems to cause more child-parent component communication. The leader said that I don’t need to write these in separate components. The idea of components is reuse, but I don’t need to reuse these. But when I look at demos on the Internet, different functional modules are separated into individual components.

So I hope you can help me figure out the logic, how to optimize the component segmentation of this chat function, and how to understand the idea of component reuse?