Creating the ListProducts component

Before we proceed with creating the filtering and ordering, we need to extract our product listing logic and template it into our component – allowing us to easily reuse it. This component should accept a prop of products, which it should be able to list and paginate.

Open up the ListProducts.js file and copy the code from the HomePage.js file into the component. Move the data object and copy the pagination and pageLinks computed functions. Move the watch and methods objects, as well as the created() function, from the HomePage to the ListProducts file.

Update the HomePage template to use the <list-products> components with a products prop, passing in the products computed value. In comparison, the HomePage component should now be significantly smaller:

const HomePage = {
  name: 'HomePage',

  template: `<div>
    <list-products :products="products"></list-products>
  </div>`,

  computed: {
    products() {
      let products...