Bug: Carousel is failing to remain locked to correct position on click

Bug Report

Current Behavior This is a GIF displaying the issue

Input Code and steps to reproduce

<carousel :perPage="3" :navigationEnabled="true" :paginationEnabled="true" id="select-packaging">
                    <slide v-for="(item, index) in items">
                        <figure class="item-preview" :class="{highlight:item.id === selected}" @click="selected = item.id">
                            {{ item.id }}
                        </figure>
                    </slide>
                </carousel>

data() {
          return {
            items: [
              {
                id: 1
              },
              {
                id: 2
              },
              {
                id: 3
              },
              {
                id: 4
              },
              {
                id: 5
              }
            ],
            selected: undefined,
          }
        },

Expected behavior/code

It works properly when there is at least n + 2 slides (n being the number per page), this is a GIF of it working properly This is the code for it working properly:

<carousel :perPage="3" :navigationEnabled="true" :paginationEnabled="true" id="select-packaging">
                    <slide v-for="(item, index) in items">
                        <figure class="item-preview" :class="{highlight:item.id === selected}" @click="selected = item.id">
                            {{ item.id }}
                        </figure>
                    </slide>
                </carousel>

Environment

• Found the issue on Windows 10 Chrome & IE11 & Edge
• Works as expected on Ubuntu 18.04 Chrome