dynamic vuetify breadcrumbs list items

Question

I want to use breadcrumbs in my vuetify project but I'm stuck somewhere. The point I'm stuck with is that when I click on bredcrumbs, the ones that come after that are deleted from the breadcrumbs list. For this, I tried the code below, but I could only delete the next element from it. Also, I couldn't delete the dividers. How do you think I can overcome this situation? thanks.

template:

    <v-breadcrumbs :items="items" divider=">">
        <template v-slot:item="{ item }">
          <v-breadcrumbs-item :href="item.href" @click="showSelectedRow2(item)">
            {{ item.text }}
          </v-breadcrumbs-item>
        </template>
      </v-breadcrumbs>

Data:

items: [
  {
    text: '',
    disabled: false,
    id: '',
  },
],

Script:

 showSelectedRow2(item) {
  for (var i = 0; i < this.items.length; i++) {
    if (this.items[i].id == item.id) {
      const index = this.items.indexOf(this.items[i]);
      this.items.splice(index, 1);
    }

    this.items.push({
      text: item.name,
      disabled: false,
      id: item.id,
    });
  }
},

eg Technology>Computer>laptop>Apple when I click on technology, only technology should remain in the list. I don't use route or link, I fill the list with data I get from an api.