Почему не работает отрисовка списка во Vuejs

На странице (vue2) есть горизонтальный список элементов. Он находится в некотором контейнере. Я хочу, чтобы при изменении этого списка, или при изменении размера контейнера, скрывались те элементы, которые не влезают, а справа показывалось их количество. Готовое использовать не могу.

Мой прототип: https://jsfiddle.net/z7nmb0ao/11/

Поведение почему-то чередуется, а результат ожидаю такой:

А получаю такой:

Помогите, пожалуйста, понять, в чём проблема. Или может есть другой подход или пример.

new Vue({
    components: {
    },
    data: {
    options: [
      { value: 1, label: '1111' },
      { value: 2, label: '2222' },
      { value: 3, label: '3333' },
      { value: 4, label: '4444' },
      { value: 5, label: '5555' },
    ],
    newItemValue: "",
    visibleCount: 0,
    tagRefs: []
    },
  mounted: function() {
    this.$nextTick(this.calculateVisible());
  },
  created: function() {
    window.addEventListener('resize', this.calculateVisible);
  },
  methods: {
    addItem() {
        this.options.push({ value: Math.floor(Math.random() * 100000), label: this.newItemValue });
      
      this.$nextTick(this.calculateVisible());
    },
    deleteItem(index) {
      this.options.splice(index, 1);
      
      this.$nextTick(this.calculateVisible());
    },
    calculateVisible() {
      const wrapper = this.$refs.wrapper as HTMLElement;
      
      if (!wrapper) return;

      let totalWidth = 0;
      let count = 0;

      const wrapperWidth = wrapper.clientWidth - 50;

      for (let i = 0; i < this.options.length; i++) {
        const el = this.tagRefs[i];
        if (!el) break;

        const elWidth = el.offsetWidth;
        if (totalWidth + elWidth <= wrapperWidth) {
          totalWidth += elWidth;
          count++;
        } else {
          break;
        }
      }

      this.visibleCount = count;
    }
  },
  computed: {
    hiddenCount: function () {
      return this.options.length - this.visibleCount;
    }
  }
}).$mount('#app')

<div id="app">
  <div class="new-item-input">
    <input type="text" v-model="newItemValue" />
    <input type="button" value="+" @click="addItem" />
  </div>

  <div class="wrapper" ref="wrapper">
    <span
      v-for="(item, index) in options"
      :key="item.value"
      :ref="el => tagRefs[index] = el"
      class="tag"
      @click="deleteItem(index)"
      v-show="index < visibleCount"
    >
      {{ item.label }}
    </span>
    
    <span v-if="hiddenCount > 0" class="tag more">
      +{{ hiddenCount }}
    </span>
    
  </div>
</div>