[Bug Report] changes within <el-form> cannot trigger hmr

[a1mersnow]

Element Plus version

2.0.1

OS/Browsers version

Mac OS 12.2.1/Chrome 98.0.4758.80

Vue version

3.2.30

Reproduction Link

https://github.com/aimergenge/element-plus-vite-starter

Steps to reproduce

1. setup the project, and start vite server, then open in browser
2. edit App.vue, change the label prop of <el-form-item>

What is Expected?

<el-form-item> rerender/update.

What is actually happening?

Nothing happened, only the console of browser print:

[vite] hot updated: /src/views/App.vue

Some changes will trigger hmr, some not.
It seems that only direct child(which is an Element Plus component) of is affected

[a1mersnow]

There was a relative issue which was closed:
#1922

[ghiscoding]

I seem to have the same problem with Vite and some attributes (like size) of <el-button> and I wouldn't be surprised that is an issue with most component attributes. I see the HMR updating in the console "hot updated" but I don't see any changes in the browser until I manually refresh (F5), anything else but Element-Plus components work just fine with HMR. Querying HMR and I see a few issues were opened and a few of them to eventually be closed by the bot without real solution

[sxzz]

/cc @JeremyWuuuuu I tested on playground in our project with this code and it reproduced. I have no idea to fix it.

<template>
  <el-form label-position="top">
    <el-form-item label="123123">
      <el-input />
    </el-form-item>
  </el-form>
  <el-button>1</el-button>
</template>

<script setup lang="ts">
import { ElForm, ElFormItem } from '../../dist/element-plus/es'
</script>

[LuckWolf]

我现在使用v2.0.1有一模一样的问题，架构是vue3+ts+vite+element-plus，在main.ts中全局引入使用的

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import zhCn form 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus,{
  locale: zhCn
})

具体说明比如 el-table对 :data的数据改变可以有热更，但是对el-table-column中label或prop值的修改就没有热重载了
而看日志观察到，vite有监控到代码的改变，但是没有发起websocket通知页面重载
后来更新element-plus到v2.1.7也没有什么改变
-------------------追加------------------
测试下来发现主要是el-table和el-form有这个问题

[0x0a0d]

I got same problem
el-table will not trigger change
example:

• add/remove el-table-column
• add/remove class-name label-class-name

[sxzz]

Track: vitejs/vite#8224

[jie-han1]

我现在使用v2.0.1有一模一样的问题，架构是vue3+ts+vite+element-plus，在main.ts中全局引入使用的

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import zhCn form 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus,{
  locale: zhCn
})

具体说明比如 el-table对 :data的数据改变可以有热更，但是对el-table-column中label或prop值的修改就没有热重载了 而看日志观察到，vite有监控到代码的改变，但是没有发起websocket通知页面重载 后来更新element-plus到v2.1.7也没有什么改变 -------------------追加------------------ 测试下来发现主要是el-table和el-form有这个问题

[a1mersnow]

@sxzz After seeing this comment, I retried(vue 3.2.47), it works.