A Vue component to wrap another and change size to help debug sizing issues without having to resize the window

ResizingWrapper.vue

<template>
  <div id="sandbox">
    <slot />
  </div>
</template>

<script>
/**
 * A component to wrap another and change size to debug sizing issues without
 * having to manually resize the window
 */
export default {
  name: 'ResizingWrapper',
  props: {
    /**
     * Minimum width in pixels
     */
    xMin: {
      type: Number,
      default: 20,
    },
    /**
     * Maximum width in pixels
     */
    xMax: {
      type: Number,
      default: undefined,
    },
    /**
     * Minimum height in pixels
     */
    yMin: {
      type: Number,
      default: 20,
    },
    /**
     * Maximum height in pixels
     */
    yMax: {
      type: Number,
      default: undefined,
    },
    /**
     * Amount of pixels to grow/shrink in each step
     */
    stepSizePx: {
      type: Number,
      default: 10,
    },
    /**
     * Amount of time to wait between steps
     */
    stepDurationMs: {
      type: Number,
      default: 50,
    },
  },
  data() {
    return {
      growHeight: true,
      growWidth: true,
    };
  },
  mounted() {
    const { width: windowWidth, height: windowHeight } =
      document.body.getBoundingClientRect();
    const maxWidth = this.xMax || windowWidth;
    const maxHeight = this.yMax || windowHeight;
    const element = document.getElementById('sandbox');
    setInterval(() => {
      const { width, height } = element.getBoundingClientRect();
      if (height >= maxHeight) this.growHeight = false;
      if (width >= maxWidth) this.growWidth = false;
      if (height <= this.yMin) this.growHeight = true;
      if (width <= this.xMin) this.growWidth = true;

      const newHeight = this.growHeight
        ? height + this.stepSizePx
        : height - this.stepSizePx;
      const newWidth = this.growWidth
        ? width + this.stepSizePx
        : width - this.stepSizePx;
      element.style.height = `${newHeight}px`;
      element.style.width = `${newWidth}px`;
    }, this.stepDurationMs);
  },
};
</script>
<style>
#sandbox {
  border: 1px solid red;
}
</style>

Video showing it in action