title: Vue set up IntersectionObserver
body: <p>I am trying to set up an IntersectionObserver for an infinite scroll list. I want to check with the IntersectionObserver if the last item of a list has been reached.</p>
  
  <p>So far my <strong>IntersectionObserver</strong> setup looks like this:</p>
  
  <pre><code>mounted() {
      const config = {
          treshold: 1
      };
  
      const observer = new IntersectionObserver((entries) =&gt; {
          entries.forEach((entry) =&gt; {
              if (entry.intersectionRatio &gt; 0) console.log(entry.target);
          });
      }, config);
  
      observer.observe(this.lastRenderedDeal());
  }
  </code></pre>
  
  <p>My <strong>list items</strong> are rendered like this:</p>
  
  <pre><code>&lt;deal :deal="deal"
        :key="index"
        ref="deals"
        v-for="(deal, index) in deals"
  &lt;/deal&gt;
  </code></pre>
  
  <p>To fetch the last <strong>renderedDeal</strong> I use the <code>ref</code> on the deals:</p>
  
  <pre><code>lastRenderedDeal() {
      const deals = this.$refs.deals;
      return deals ? deals[deals.length - 1].$el : null;
  }
  </code></pre>
  
  <p>This works for the initial setup and it triggers. The problem is that when I want infinite scroll I need to keep appending to the list of deals. So my <code>lastRenderedDeal</code> constantly updates to reflect the last deal that was appended to my list.</p>
  
  <p>This reactivity is not being passed on to the <code>observer.observe</code> method it seems. It only picks up my initial element. This seems kind of obvious since it has been instantiated in the <code>mounted</code> hook but how can I deal with this?</p>
  
  <p>Do I need to set a watcher for the deals and call the observer.observe again? If so, can I simply tell it to replace the initial observed item?</p>