Changes in props not visible in HMR (need to reload page)

Question

I've got a small problem (or maybe it's intended and I just don't know how it should work). I've got parent component - App.vue

<script setup>
import AboutMe from "./components/AboutMe.vue";
</script>

<template>
    <AboutMe username="Andrew" />
</template>

Child component AboutMe.vue

<script setup>
defineProps(["username"]);
</script>

<template>
    <div class="container">
        <div>Name: {{ username }}</div>
    </div>
</template>

Now when I try to add some props: App.vue:

<AboutMe username="Andrew" age="30" />

AboutMe.vue

<script setup>
defineProps(["username", "age"]);
</script>

<template>
    <div class="container">
        <div>Name: {{ username }}</div>
        <div>Age: {{ age }}</div>
    </div>
</template>

I see only 'Age: ', need to manually reload to see 'Age: 30'.

• I'm using latest Vite but it's the same on the latest Vue CLI.
• Not sure why but using Vitesse Framework it works great.
• Vue Chrome Dev Tools shows 'age' as attr, not prop until reload.
• Tried without but no luck.

Thanks in advance for any help.

Answer 1

It seems that the bug was reported and fixed by Evan from 3.0.0-beta.11

3.0.0-beta.11 (2020-05-11)

Bug Fixes
hmr: always force full child component props update in HMR mode (1b946c8)