HMR does not work with certain code in Vue

[sxzz]

Describe the bug

When using slot, the prop is not updated after modifying the prop of the child component.

<template>
  <!-- Simple example -->
  <Form>
    <!--              ⬇️ changed it but not updated -->
    <FormItem label="second" />
  </Form>
</template>

// form.js
import { renderSlot as _renderSlot } from 'vue'

// https://vue-next-template-explorer.netlify.app/#eyJzcmMiOiI8c2xvdCAvPiIsInNzciI6ZmFsc2UsIm9wdGlvbnMiOnsiaW5saW5lIjp0cnVlfX0=
// <slot />
export default (_ctx, _cache) => {
  return _renderSlot(_ctx.$slots, 'default')
}

// form-item.js
import { toDisplayString as _toDisplayString } from 'vue'

export default {
  props: { label: String },
  setup(props) {
    // https://vue-next-template-explorer.netlify.app/#eyJzcmMiOiJ7eyBsYWJlbCB9fSIsInNzciI6ZmFsc2UsIm9wdGlvbnMiOnsiaW5saW5lIjp0cnVlfX0=
    // {{ label }}

    // Generated code:
    return (_ctx, _cache) => {
      return _toDisplayString(_ctx.label)
    }
  },
}

Reproduction

Online: https://stackblitz.com/edit/vitejs-vite-z9guvb?file=App.vue&terminal=dev

Repo: https://github.com/sxzz/vite-hmr-issue

• pnpm run dev for Vite example
• pnpm run serve for Webpack example

Webpack works normally, but vite didn't update prop.

System Info

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.40 GB / 32.00 GB
    Shell: 3.4.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.15.0 - ~/Library/Caches/fnm_multishells/70638_1652903045156/bin/node
    Yarn: 1.22.18 - ~/.pnpm/bin/yarn
    npm: 8.5.5 - ~/Library/Caches/fnm_multishells/70638_1652903045156/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: 101.0.1210.47
    Firefox: 99.0
    Safari: 15.4
    Safari Technology Preview: 15.4
  npmPackages:
    @vitejs/plugin-vue: ^3.0.0-alpha.0 => 3.0.0-alpha.0 
    vite: ^3.0.0-alpha.1 => 3.0.0-alpha.1

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sxzz]

Kapture.2022-05-19.at.03.46.12.mp4

Vite and Webpack

[sapphi-red]

Looks similar to #7839. But it is interesting that this does not reproduce with webpack.
Maybe vuejs/core#5781 work for this too?

[thonymg]

Same issue, in my case i must restart the server to see change on certain file. But on other files it's work perfectly

[BSlaven]

I have the same issue in react app. Change in one component triggers hrm as well as changes in its module.css file, but in the other component it does not.

[crystalfp]

Same problem when upgrading vite from 2.9.9 to 2.9.12
I'm working on vue 3 on Windows.

[daniloribeiro00]

Tried with Vite 3.0.0 but it still doesn't work properly

[oski646]

I've tried to remove everything in a single page to the moment that HMR works fine, and I found that...

HMR works:

<template>
  <Container class="mt-12">test</Container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Container from '@/components/app/Container.vue'

const route = useRoute()
const player = computed(() => route.params.player)
</script>

HMR doesn't work:

<template>
  <Container class="mt-12">test</Container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Container from '@/components/app/Container.vue'
import { useCookies } from 'vue3-cookies'

const route = useRoute()
const player = computed(() => route.params.player)
</script>

The only difference is single import: import { useCookies } from 'vue3-cookies'.
Maybe it will be helpful for someone who will be creating a fix.

vue3-cookies (1.0.6): https://github.com/KanHarI/vue3-cookies

[sapphi-red]

Closing as I confirmed this worked after upgrading Vue to 3.2.38.