Updating query parm in vue router dynamically

How come one way works and other dosnt. (URL not updating dynamic)

I want to remove parm2 from URL

URL : http://localhost/testpage?parm1=xyz&parm2=xyz&parm3=xyz

Do not work (Output: http://localhost/testpage?parm1=xyz&parm2=xyz&parm3=xyz)

const query = this.$route.query;
delete query.parm2;
this.$router.replace({ query: query } );

Do work (Output: http://localhost/testpage?parm1=xyz&parm3=xyz)

this.$router.replace({ query: {parm1: 'xyz', parm3: 'xyz'} );

const query = this.$route.query creates a reference to the same object in memory, so you are then directly modifying vue-router data when you delete query.parm2. This inteferes with vue-router's ability to track what the current route params actually are. You need to clone the object first, then delete.

const query = { ...this.$route.query };
delete query.parm2;
this.$router.replace({ query: query });