Vue: this.$refs.key return undefined after hot reload

[Shiva127]

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.

[posva]

That happens because you have a setInterval still running, you should clear it in beforeDestory:

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

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

[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

[chopfitzroy]

Can confirm I am not using setInterval anywhere and still having this issue.

[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.

[ecgk]

Im having the same issue. It was working in vue 2.5.17

[JhumanJ]

Same issue here.

[gilles-crealp]

FYI, the response from @posva is correct; it was because setInterval was still running.