How to organize the structure of components when the methods are almost the same but the HTML markup is different?

Question

Vue.js

2 different pages, one with categories, the other with posts.
Both have common motods, the word loadMore() when scrolling, notification when there are no results, and others. But there are different naturally.
However, the markup is different. on the post page, we display the post + description + title, and on the category page, the title + image.
On masonry posts, but in grid categories.
It will be expensive to duplicate the method, there are about 150 lines and 8 methods for lazy loading.
How would you break down the structure of the application, components?

Answer 1

That's what mixins are for.

Answer 2

Take out the general logic in vuex and do not fence bicycles.