Version

3.0.5

Reproduction link

https://github.com/nickngqs/vue-attribute-bug

Steps to reproduce

1. Open App.vue
2. Change fontSize attribute of HelloWorld component in App.vue

What is expected?

HMR should update both h1 when attribute is updated

What is actually happening?

1st h1 with object binding - HMR does not work. 2nd h1 with inline binding - HMR works.

Additional

App.vue

<template>
  <HelloWorld fontSize="40" msg="Hello" />
  // Change fontSize="40" to any value
  // 2nd h1 with inline style binding works
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

HelloWorld.vue

<template>
  <h1 :style="h1styles">HMR doesn't take effect here - {{ msg }}</h1>
  <h1 :style="{ fontSize: `${fontSize}px` }">HMR takes effect here- {{ msg }}</h1>
</template>

<script setup>
import { defineProps, ref } from 'vue'

const props = defineProps({
  fontSize: String,
  msg: String
})

const h1styles = ref({
  fontSize: `${props.fontSize}px`,
  display: 'block'
})
</script>

h1styles should be a computed property. Your code permanently writes the initial prop value to the ref's fonSize property.

Thanks for the help. Just curious, shouldn't the behaviour of HMR also update it too, since the attribute value has been edited. (purely from a HMR point of view)

No it should not.