title: Only load data when component is in view?
body: <p>Im having some problems with my data getting loaded even if the component is not in the current view 
  I have a list with 500 elements, which is why each component should only load it's data when scrolled to the element is the list...</p>
  
  <ul>
  <li>Im using this mixin:-</li>
  </ul>
  
  <p><a href="https://github.com/BKWLD/vue-in-viewport-mixin" rel="nofollow noreferrer">https://github.com/BKWLD/vue-in-viewport-mixin</a> 
  When the component is mounted, then I have a watcher to see if the current component is in the view, however, doesn't quite seem to work quite as I hoped, or maybe im using it wrong. </p>
  
  <p>Either way, no matter what it calls my function <code>this.loadDataToSystem();</code> even if the component is not in the current view. What I want is to only call the function when I've scrolled to the component...</p>
  
  <p>The component looks is this:-</p>
  
  <pre><code>    &lt;template&gt;
    &lt;div&gt;
      &lt;template v-if="elementIsVisible"&gt;
        &lt;div class="grid-tile__content" :class="{
          'is-alarm': system.pending_events === 'alarm',
          'is-acknowledged-alarm': system.pending_events === 'alarm-acked',
          'is-warning': system.pending_events === 'warning',
          'is-info': system.pending_events === 'event',
          'is-offline': system.status === 'Offline',
          'is-online': system.status === 'Online'}"&gt;
  
          &lt;h2 class="grid-tile__system-name"&gt;
            &lt;span&gt;{{system.name}}&lt;/span&gt;
          &lt;/h2&gt;
  
          &lt;p class="grid-tile__unit-name"&gt;System Pressure&lt;/p&gt;
  
          &lt;div class="grid-tile__content__loading" v-if="loading"&gt;
            &lt;loading&gt;&lt;/loading&gt;
          &lt;/div&gt;
  
          &lt;div v-else&gt;
            &lt;div class="grid-tile__footer"&gt;
              &lt;div class="grid-tile__chart-info"&gt;
                &lt;span class="grid-tile__chart-number"&gt;
                  &lt;template v-if="system.last_value !== ''"&gt;{{system.last_value}}&lt;/template&gt;
                  &lt;template v-else&gt;N/A&lt;/template&gt;
                &lt;/span&gt;
                &lt;span class="grid-tile__chart-unit"&gt;
                  &lt;template v-if="system.unit.length &gt; 0"&gt;
                     {{system.unit}}
                  &lt;/template&gt;
                  &lt;template v-else&gt;
                    N/A
                  &lt;/template&gt;
                &lt;/span&gt;
                &lt;!--span class="grid-tile__chart-prev-number"&gt;3.34%&lt;/span--&gt;
              &lt;/div&gt;
  
              &lt;div class="grid-tile__notification"&gt;
                &lt;span class="grid-tile__notification-circle"&gt;&lt;/span&gt;
                &lt;span&gt;02.aug / 09:34am&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import SystemService from '../../../../Api/Systems';
    import Loading from '../../../../Icons/AltenateLoader.vue';
    import inViewport from 'vue-in-viewport-mixin';
  
    export default {
      props: ['systemData', 'startDate', 'endDate', 'frequency'],
      mixins: [ inViewport ],
      watch: {
        'inViewport.now': function(visible) {
          if(visible) {
            this.loadDataToSystem(); //This should only be triggered if the user has scrolled to the component- So if the component is in the current view
            this.elementIsVisible = true;
          } else {
            this.elementIsVisible = false;
          }
        }
      },
      data() {
        return {
          endpointConf: {
            start: this.startDate,
            end: this.endDate,
            frequency: this.frequency
          },
          system: {
            status: '',
            pending_events: '',
            name: this.systemData.name,
            last_online: '',
            unit:'',
            y_max_value: '',
            y_min_value: '',
            last_value: ''
          },
          data: this.systemData,
          loading: true,
          elementIsVisible: false
        }
      },
      components: {
        Loading
      },
      methods: {
        loadDataToSystem() {
          SystemService.getSystem(this.data.id).then(response =&gt; {
            if(response.status === 200) {
              console.log("load data");
            }
          }).catch((error) =&gt; {
            console.log("Fejl:" + error);
          });
        }
      },
      created() {
  
      }
    }
  
  &lt;/script&gt;
  </code></pre>