Fix useRouteQuery reactivity

[pleek91]

Description

useRouteQuery works by creating an array of operations to apply to the query and then updating the query in batches. But when the operations were flushed to the actual route the operations were being cleared before updating the route. This resulted in individual query params flipping from the new value to the old value and then back to the new value.

Reproduction

<template>
  <button type="button" @click="testing">click me</button>
</template>

<script setup lang="ts">
  const tab = useRouteQueryParam('tab')

  watch(tab, () => {
    console.log('tab changed', tab.value)
  })

  function testing(): void {
    tab.value = randomId()
  }
</script>

Result

tab changed bd123e4b-75e2-41bd-bd20-39c53a246fe7. ---- (new)
tab changed 93b2ba30-2797-4c78-ab38-7d987913bc05 ---- (old)
tab changed bd123e4b-75e2-41bd-bd20-39c53a246fe7 ---- (new)

Expected

tab changed bd123e4b-75e2-41bd-bd20-39c53a246fe7. ---- (new)

Fix

Waiting to clear the operations from the queue until after they have been applied to the route fixes the issue.

Thank you @collincchoy for the reproduction and debugging you did on #332 which was a bandaid fix that we ultimately reverted because it caused other issues.

[znicholasbrown]

subtle