Why is the Vue component not re-rendered after changing the Pinia state (removing the object in the array)?

Question

I have a deleteHandler function that changes the users array in pinia. However, in vue's devtools, the state changes but the component is not re-rendered, but if I remove the object from the array, just change some values, then vue recognizes it and re-renders the component, just by removing it from the array Objects won'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 think this is some kind of reference issue. Please try this

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

Installed

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