Why doesn't re-render Vue the component after changing the Pinia state (deleteing an object in Array)?

Question

I have a deleteHandler function, which changes the users array in pinia. However, in the devtools in vue, the state is changed, but the component didn't re-render, but if I instead deleting the object from the array, just change some values, then vue recognize it and re-render the component, only by deleting the object from the array doesn't work.

const deleteHandler = (user) => {
  //doesn't renders
    useUser.users = useUser.users.filter(usr => usr.id !== user.id) 
  //it works, the component is re-rendered
  useUser.users.forEach(usr => {
    usr.points += 1
  })
}

Answer 1

I thinks it some kind of reference issue. Please try this one

useUser.users = [...useUser.users.filter(usr => usr.id !== user.id)];

insted of

useUser.users = useUser.users.filter(usr => usr.id !== user.id)