How to understand the component is it or not in vue?

Question

Vue.js

Good afternoon. Moved to vue. And when creating applications, the question began to arise whether it was a separate component or classes could be dispensed with. For example, there is a button, of a different type, let's say red, green, blue. It can be made a separate component, for example, AppButton, and specify its type in the parameters, and add a class in the component, depending on the type. But the same thing can be done with just classes, and you can add them manually. The same example can be given with Input. So the question is how to understand when you need to create a separate component, and when you can get by with classes.

Answer 1

The component is not created in order to simply hang classes on it (as in your case with the button). A component is, exaggeratedly, an object for which its work, its data, and so on are defined. Components are convenient to use when you need to have objects of the same type on your site (for example, graphics), but with different data.
For example, the Button component in your case is not really needed until, for example, these buttons have to hang event handlers (which are definitely some specific number).
It is easy to understand on the example of the usual post templates of any CMS, they are usually placed in a separate file. It is not always clear where they are used on the site, but you can always correct the post template IN ONE PLACE and be sure that it will change everywhere.
The same goes for your button. You can create a Button component, knowing that these buttons may need to be supplemented with some properties, or the structure of the button itself will need to be changed.
Button is too simple an example in your case. You need to understand that the component has its own data, methods, event watchers, and so on. And as soon as you need any of this - you use the component.