Refactoring: Quick wins or long-term gains?

I was watching a Vue.js course, and the course's lesson explained how to create a file as a Service. The example in the course was: two Vue.js components, both of which were using the same API and getting data. Instead of applying and implementing duplicate code in both files, the instructor created a new Service file and centralized the data-fetching logic.

In my project, I hadn't structured it that way yet, but I still had some data-fetching code spread throughout the code. So, I decided to do the same and centralize all data fetching in StockService.js.

Here are the advantages of doing it:

1 - Separation of concerns/ Reusability: once you centralize the code that shares the same responsibility, it's great for maintainability! Nothing is worse for a developer than duplicate code because then you must look through all the places you have to change. Future-you will be thankful for this decision!

2 - Scalability: the truth is, my project is still a small project, just two components, only two or three data fetches. Imagine when the app starts to grow. Centralizing will prevent chaos! Imagine 25 components all talking to the backend in different ways: a nightmare!

3 - Testability: isolated functions provide a much easier way to implement unit tests.

4 - Cleaner and smaller components: the component files will be easier to read, more concise and smaller. Your colleagues will understand your code more easily and faster!