Extra item added at the bottom

[angelomelonas]

Using the exact example code, a strange issue is appearing in Chrome. When scrolling to the bottom of the page, after reaching the "Vue Loop" white page, an additional item ("1") is added. This causes an undesirable effect of reaching the "Vue Loop" page, followed by "1" and then "Vue Loop" again as the scroll bar jumps to the top.

<div class="loop-container full">
      <div class="item" style="background: white;"><h1>Vue Loop</h1>
        <p>Go for a scroll to try.</p></div>
      <div class="item">
        1
      </div>
      <div class="item">
        2
      </div>
      <div class="item">
        3
      </div>
      <div class="item">
        4
      </div>
      <div class="item" style="background: white;"><h1>Vue Loop</h1>
        <p>Go for a scroll to try.</p>
      </div>

     <!-- This item is added additionally. -->
      <div class="item">
        1
      </div>
</div>

Playing around with the Vue Loop code a little, I managed to "fix" the issue by removing the +1 here:

makeDuplicates() {
...
     for(var i = 0; i < division + 1; i++) {
              container.appendChild(container.childNodes[i].cloneNode(true));
     }
...

I doubt this is the correct way to resolve this issue. I have not been able to spend a lot of time investing the Vue Loop code logic further, but it seems that it only exists in the Vue-Loop code, and not the original pure JS code.

Am I the only one experiencing this issue?