Lazy loading image component not updated when is in the view port

I created a component that will load itself when it is in the viewport. The problem that I am facing is that it is not updating itself once it is in the viewport. The ​mixing job is only way to check if the component is in the view port or not. As for now this is ONLY working every time I refresh the page. I would like the component to be updated when the user scrolls down instead of refreshing. Would appreciate if someone could set me on the right path.

Mixin:

​App.InViewportMixin = Ember.Mixin.create({
    enteredViewport: function(){
       var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
        };

        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();

        var bounds = this.$().offset();
        bounds.right = bounds.left + this.$().outerWidth();
        bounds.bottom = bounds.top + this.$().outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right  || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    }.property(),
});

Component:

​App.LazyImageComponent = Ember.Component.extend(App.InViewportMixin,{
    loadComponent: function() {
        var enteredViewport = this.get('enteredViewport');
        if (enteredViewport == true) {
             console.log(enteredViewport);
        }
    }.observes("enteredViewport").on('didInsertElement')
});

Template:

{{lazy-image}}