vue js routes

vuejs.js

const PeopleListing = ('people-listing', {
    template: '#people-listing-template',
    delimiters: ['${', '}'],
    data: function() {
        return {
            products: []
        }
    },
    mounted: function() {
        this.getAllProducts();
    },

    methods: {
        getAllProducts: function(){

            this.$http.get('/collections/homepage/products.json').then(function (response) {

                $.each(response.data.products, function(key, value) {
                    var product = value;
                    this.products.push(product);
                }.bind(this));

                
            }.bind(this), function (response) {

                console.log('error getting beers from the pivot table');

            });

        }
    },

    props: ['people-listing']

});

const ProductDetail = ('product-detail', {
    template: '#product-detail-template',
    delimiters: ['${', '}'],
    created () {
        this.fetchData()
    },
    watch: {
        '$route': 'fetchData'
    },
    methods: {
        fetchData () {
          this.error = this.product = null
          getPost(this.$route.params.handle, (err, post) => {
            this.loading = false
            if (err) {
              this.error = err.toString()
            } else {
              this.product = product
            }
          })
        }
    }

});

const router = new VueRouter({
  mode: 'history',
  routes: [
        {path: '/', component: PeopleListing},
        {name: 'product', path: '/products/:handle', component: ProductDetail }
    ]
});