RequestAnimationFrame resize paradox?

by Admiral Potato

HTML

<div id="container">
  <div class="multi">
    <resizey-doo
      :width="800"
      :height="600"
      key="a"
    ></resizey-doo>
    <resizey-doo
      :width="500"
      :height="900"
      key="b"
    ></resizey-doo>
  </div>
</div>

SCSS

.resizey-doo {
  position: relative;
  border: 1px solid #f00;
  background-color: rgba(255,255,255, 0.25);
  overflow: hidden;

  & +.resizey-doo {
    margin-top: 16px;
  }
  
  img {
    position: relative;
    width: 100%;
    height: auto;
  }

  .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 3rem;
  }
}

JavaScript

Vue.component('resizey-doo', {
	template: `
  	<div
    	class="resizey-doo"
    >
    	<img
      	:src="imageData"
        ref="image"
      />
      <div
      	class="overlay"
      >Hello</div>
    </div>
  `,
  data () {
	  return {
    	imageData: '',
      cWidth: 0,
      cHeight: 0
    }
  },
  props: {
  	width: Number,
  	height: Number
  },
  mounted () {
    this.canvas = document.createElement('canvas')
    this.resize()
  },
  computed: {
	  computedSize () {
	    return {
        width: this.cWidth + 'px',
        height: this.cHeight + 'px'
      }
    }
  },
  methods: {
  	resize () {
    	requestAnimationFrame(this.resize)
      this.canvas.width = this.width
      this.canvas.height = this.height
			this.imageData = this.canvas.toDataURL('png')
      this.cWidth = this.$refs.image.clientWidth
      this.cHeight = this.$refs.image.clientHeight
    }
  }
})

var app = new Vue({
	el: '#container'
})