State is not sync in x-for

[ponyjackal]

I have two arrays in my scope
{
pets: [],
filteredPets:[]
}

Once I update filteredPets = pets.filter(...)

I get correct filteredPets,

but if I use x-for to print filteredPets, it prints pets, not filteredPets, but the length is filteredPets.length

[ponyjackal]

I guess DOM is not updated correctly if I load DOM elements from array,

[KevinBatdorf]

Do you have a demo online? It seems to work for me like this: https://codepen.io/KevinBatdorf/pen/MWjqGJp

[ponyjackal]

Yeah, it works for the first time on rendering.
The thing happens on re-rendering,
On re-rendering previous DOM is not cleared, thus it affects updated DOM,

[ponyjackal]

bandicam.2021-01-11.09-04-52-386.mp4

Please check this out

1. filter "All" is rendered for the first time - fine
2. if I select "adopted", it should render "adopted" pet, but it renders 3 first pets (there are 3 adopted pets)
3. if I select "special needs" and then select "adopted", it renders correctly, 3 adopted pets

I guess this is all about DOM re-render when state is updated

[arceus03]

@ponyjackal Can you provide a codesandbox link?