this.$refs.key return undefined after hot reload

Version

2.4.2

Reproduction link

No reproduction link, need hot reload…

Steps to reproduce

Use this vue file:

<template>
  <div>
    <div ref="test"></div>
  </div>
</template>

<script>
export default {
  name: 'test',
  mounted () {
    setInterval(() => {
      console.log(this.$refs.test)
    }, 2000)
  }
}
</script>

<style>
</style>

Run it then edit the file, change this.$refs.test to this.$refs.test.clientWidth, save and watch the console.

What is expected?

After hot reload, display the width of the div.

What is actually happening?

After hot reload, return undefined, then the width of the div.

---

It the same if you use a $refs in a function of an event listener. Even if you destroy it in deforeDestroy.

[noomz]

Wait. This is not about interval, he just want to show that $refs.key will be undefined. It seems like after hot-reloading, reference on $refs.key is missing. I still have this problem with Vue CLI 3.0.0-rc.11

[gunduzemreozer]

Yes, unfortunately I live this issue. I’am using this.$nextTick and also setTimeout, both of them are same result. I write console.log this.$refs on nextTick and it returns id of it in object key but the value is undefined.