fix(VNumberInput): resync display after model is overridden

Author: lazerg

packages/vuetify/src/components/VNumberInput/VNumberInput.tsx

@@ -249,7 +249,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       vTextFieldRef.value?.controlRef?.dispatchEvent(new Event('change', { bubbles: true }))
     }
 
-    function toggleUpDown (increment = true) {
+    async function toggleUpDown (increment = true) {
       if (controlsDisabled.value) return
       if (increment ? !canIncrease.value : !canDecrease.value) return
       if (model.value == null) {
@@ -265,6 +265,10 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
         inputText.value = correctPrecision(model.value - props.step, inferredPrecision)
         emitChange()
       }
+      await nextTick()
+      if (model.value !== toNumber(inputText.value)) {
+        inputText.value = model.value == null ? null : correctPrecision(model.value, inferredPrecision)
+      }
     }
 
     function onBeforeinput (e: InputEvent) {

packages/vuetify/src/components/VNumberInput/__tests__/VNumberInput.spec.browser.tsx

@@ -583,4 +583,23 @@ describe('VNumberInput', () => {
       expect(onChange).toHaveBeenCalledTimes(2)
     })
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/23098
+  it('keeps the display in sync when the emitted value is overridden', async () => {
+    const model = ref(0)
+    render(() => (
+      <VNumberInput
+        modelValue={ model.value }
+        onUpdate:modelValue={ (val: number) => { model.value = Math.max(0, val) } }
+      />
+    ))
+
+    await userEvent.click(screen.getByTestId('decrement'))
+    await expect.element(screen.getByCSS('input')).toHaveValue('0')
+    expect(model.value).toBe(0)
+
+    await userEvent.click(screen.getByTestId('increment'))
+    await expect.element(screen.getByCSS('input')).toHaveValue('1')
+    expect(model.value).toBe(1)
+  })
 })