Curious glitch with @click when updating component array data

[instabot42]

I have a component with an array as part of it's data. This array is rendered out in the markup with a x-for using something that starts like this...

<template x-if="hasClients()" x-for="client in filteredClients" :key="client">
    ...
    <a href="#" @click="toggleClientOpen(client.id)">see more</a>
    ...
</template>

This has been working fine. I've added some filters to this array. The are checkboxes with x-model bindings, plus a $watch('filterSearch', () => this.onUpdateClientList()); thing happening in the init() function.

Each time the filter changes I update the filteredClients array using Array.filter(), but sometimes the @click handler on one of the items in the list (see above) stops working. Typically this is after the item has been removed with the filter, then comes back later when the filter is removed, but is now not working.

I have worked around this for now by this hackery...

onUpdateClientList() {
    // empty it for now
    this.filteredClients = [];
    setTimeout(() => { this.filteredClients = this.clients.filter((item) => { ... }); }, 50);
}

In other words, I empty the array, and set a timeout to bring it back again later. This resolves the broken @click handler, but causes a flicker and is nasty.

Any idea what could be causing this problem in the first place and any suggestions as to how I might work around it better.

[instabot42]

Just noticed I was using v2.3.

Updating to 2.7 appears to solve the problem