How to update query params without performing a refresh ?

<script setup lang="ts">
const route = useRoute()

const fieldValue = computed(() => route.query.field)

async function updateField(value: string) {
  const query = { ...route.query }
  query.field = value
  await navigateTo({
    path: '/current-path',
    query
  })
}
</script>

<template>
  <input type="text" :model-value="value" @update:model-value="updateField($event)" />
</template>

<script setup lang="ts">
const route = useRoute()

const fieldValue = computed(() => route.query.field)

async function updateField(value: string) {
  const query = { ...route.query }
  query.field = value
  await navigateTo({
    path: '/current-path',
    query
  })
}
</script>

<template>
  <input type="text" :model-value="value" @update:model-value="updateField($event)" />
</template>