为什么我的视图没有从我的vue组件渲染数据？

Question

我正在尝试从混合使用vue组件和vue-router设置的api获取产品列表。我能够在获取数据的函数内部控制日志数据，但是我无法在视图中呈现这些数据，因此我可以看到组件注册到的根上的真实数据。我的要点在于你：

https://gist.github.com/mdunbavan/65c9ad008ef06bc1c9058d76507e864e

它看起来获取数据的主要区域是：

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

    methods: {
        getAllProducts: function(){

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

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


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

                console.log('error getting products');

            });

        }
    },

如果此代码有任何问题以及为什么它不会在根模板视图中呈现数据，有人可以告诉我吗？