Using watch to observe a prop in a vue custom element, the other props accessed in the listener are the old values.

[hanshy1]

Vue version

3.5.11

Link to minimal reproduction

https://play.vuejs.org/#eNqVVU1v2zAM/SuEL3aL1Knd7pIlAbaih+2wFWuPBgbPZhJ3smRIcpohyH8fJfkrTdK0udQin56eHil2632pqnBdozfxpiqTRaVBoa6recKLshJSwxYkLmAHCylK8Anqd6m7VcHyJhGO7cpw9YAt5LgoON7VSovynmGJXO9xfU54wjPBlYZ1ymqMYGbOC3xBzC7iX+wh4gNEbBAJJ91PRYmi1kFwAbM5bBMODUdo/9BOn+NLy9ul4yPpmNK7EVxb6vHl5cf5r86dYAF0RnRtToHLsfViaJUKnX+Br1HpK2T+6JijgbX+gkimY1dEKh8tNJYVSzXSCmCaF+t5liqEaDIdm4WNNsQwqaSoolniOfGJ5yJxG4kTbz4dN2i39Y98RRyfJB7SHB51lvhmSOy67n16LfYE6e0J0rNaX5Ma9Z3R3sjTitp1USzDZyU4PSzbJ4mXibIqGMqflS6onRNv4jrI5FLGxMt3G9OyxlEbz1aY/T0Sf1YbE0u8B4kK5RoTr8vpVC5Ru/T94w/c0HeXLEVeM0K/kfyFSrDaaHSwrzXPSfYAZ9V+s0+84Msndb/RyFV7KSPUIHcWT87VePfG1Xu5N+Gt3UePglzsxokZTQedDBlLlaK65FgKqopjs8W1FYNCwXYLZt+DXe92fbUHwPgVMN4Dtl97FSbRvJmVzQo3dtrRy0xrRlPPRA256q5pNXUrAP2vwgk8akn+NbZCu38CfvPlBkjrpGOJP8xiJpll6YuSpzqlGdYQSRr4kg9oW9N6Dr+j74xqktQph/wvqc5WJy+/Sm1DBfSkOg3mZ4a8YBgysQx8V8WMsEvMR+7qplY0AfWqUKENmLHZ/Gywr+JsgGpBrY2n7Hy3rnhfl2m2oazolCzzz61HHZPVW1iKmmvM2yqZIBk8mO/0RH6vUZpnRy/kJvwURpG3+w9vZ4NB

Steps to reproduce

1. Add custom components in the <template> of the parent component with different prop orders.

<template>
  <test-el :prop1="value1" :prop2="value2"></test-el>
  <test-el :prop2="value2" :prop1="value1"></test-el>
</template>

2. Use watch in the child component to monitor changes in a prop and record the value of another prop.

  watch: {
    prop1: {
      handler(val) {
        console.log('prop1 changed, prop2 is ', this.prop2)
        this.tempProp2 = this.prop2
      },
    },
    prop2: {
      handler(val) {
        console.log('prop2 changed, prop1 is', this.prop1)
        this.tempProp1 = this.prop1
      },
    },
  },

3. Update the prop value in the parent component.

const value1 = ref('old value1')
const value2 = ref('old value2')

setTimeout(() => {
  value1.value = 'new value1'
  value2.value = 'new value2'
}, 0)

4. Observe the results.

What is expected?

The watch listener in a custom element can access the latest prop values.

What is actually happening?

For a custom element, when using watch to observe a prop, accessing the values of other props defined later in the order within the listener will return their old values.

System Info

No response

Any additional comments?

No response

[catsmeatman]

bug exist from Vue 3.5.0. In Vue 3.4.38 all ok.