title: Vue canvas $ref not defined on resize. Throws error but works appears to work anyways?
body: <p>In my app I have a tabbed interface, and in one of the tab's &quot;windows,&quot; there is a canvas that automatically fits to the window size every time the window is resized. Everything works fine, but when I switch tabs and switch back, then try to resize the window, it still works but throws a &quot;this.$refs.canvas is undefined&quot; error.</p>
  <p>I've set up a simplified example that toggles the canvas element on and off. The code is complete if you want to try debugging it. There is no problem if you resize the window immediately after load, and it works without error, but if you toggle the canvas on and off, it will throw an error</p>
  <p>Main App file:</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;button class=&quot;toggleBtn&quot; @click=&quot;toggleCanvas()&quot;&gt;Toggle Canvas&lt;/button&gt;
      &lt;component class=&quot;canvasBox&quot; :is=&quot;canvasElX&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import ResizeCanvas from './components/ResizeCanvas.vue'
  
  export default {
    name: 'App',
    components: {
      ResizeCanvas
    },
    data(){
      return {
        canvasShow: true,
        canvasEl: null
      }
    },
    computed: {
      canvasElX(){
        if (this.canvasShow){
          return ResizeCanvas;
        }
        else{
          return null;
        }
      }
    },
    methods: {
      toggleCanvas(){
        this.canvasShow = !this.canvasShow;
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  html, body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
  }
  
  #app {
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  .toggleBtn{
    width: 150px;
  }
  
  .canvasBox{
    flex-grow: 1;
  }
  &lt;/style&gt;
  </code></pre>
  <p>ResizeCanvas component:</p>
  <pre><code>&lt;template&gt;
    &lt;div ref=&quot;resizeCanvas&quot; class=&quot;resizeCanvas&quot;&gt;
      &lt;canvas ref=&quot;canvas&quot; class=&quot;canvas&quot;&gt;
        //Error loading canvas
      &lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'ResizeCanvas',
    mounted(){
      window.addEventListener('resize', ()=&gt;{this.resizeCanvas()});
  
      this.resizeCanvas();
      this.drawCanvas();
    },
    beforeDestroy(){
      window.removeEventListener('resize', ()=&gt;{this.resizeCanvas()});
    },
    methods: {
      resizeCanvas(){
        let canvas = this.$refs.canvas;
  
        canvas.width = this.$refs.resizeCanvas.clientWidth;
        canvas.height = this.$refs.resizeCanvas.offsetHeight;
  
        this.drawCanvas();
      },
      drawCanvas(){
        let canvas = this.$refs.canvas;
        let ctx = canvas.getContext('2d');
  
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, 50, 50);
        ctx.fillRect(canvas.width - 50, canvas.height - 50, 50, 50);
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .resizeCanvas{
      position: relative;
      width: 100%;
      height: 100%;
    }
  
    .canvas{
      position: absolute;
    }
  &lt;/style&gt;
  </code></pre>
  <p>It's a pretty puzzling issue. While it appears to work anyways, I'm worried this might be causing sneaky issues in the background that I'll have to find out the hard way in the future.</p>