title: CropperJs image is tiny in Vue but after editing it gets back to normal size
body: <p>This is a very strange behavior and I don't know what to make of it, I'm building a website for cropping images using Vue.js and CropperJs, on homepage users select the image they want to crop and click on 'Continue', next page shows a component called <code>ImageCropper.vue</code>, the canvas and everything is displayed successfully but it's tiny, but let's say I edit the html, even if I add just a blank line, the image gets back to the size it should be (I don't have a predefined size for it, so it just takes 100% of the width of the container and height is auto, I suppose.)</p>
  
  <p><code>ImageCropper.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="image-container"&gt;
          &lt;img ref="image" :src="source"&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Cropper from 'cropperjs'
  
  export default {
      name: "ImageCropper",
      props: ["source"],
  
      data() {
          return {
              cropper: null,
              imageElement: null
          }
      },
  
      mounted() {
          this.imageElement = this.$refs.image
          this.cropper = new Cropper(this.imageElement, {
                  aspectRatio: 1 
          })
  
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Before editing template: <a href="https://i.stack.imgur.com/5woRw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5woRw.png" alt="before editing"></a></p>
  
  <p>After editing it (just added a blank line): <a href="https://i.stack.imgur.com/h6THB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h6THB.png" alt="enter image description here"></a></p>
  
  <p>I tried styling it with css but none seem to have effect on it, maybe there's something wrong with the way I use vue? This is Vue with Vuetify, if that matters.</p>