Vue Simple Component

HTML

<div id="app">

  <div ref="test-container" id="test-container" class="h-full relative" 
  @mousedown.prevent="disableMiddleClickScroll"
  @mousemove="moveDoors"
  @wheel="disableWheelScroll">

    <div
      :ref="'door-' + index"
      v-for="index in numDoors" :key="index"
      class="door bg-gray-300 p-8  text-center rounded flex-none">
      Door
      </div>
    

    
  </div>

</div>

SCSS

html {
    height:100vh;
  
    margin:0;
    box-sizing: border-box;
}


*, *:before, *:after {
box-sizing: inherit;
}

body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    background-color: #262f3e;
}

#app {
    height:100%;
}


#test-container {
  position: fixed;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    
}

  .door { 
  

      position: absolute;
      left: 0%;
      top: 0%;
      right: auto;
      bottom: auto;
      cursor: pointer;
      width:25vw;
      background-color:lightgray;
      text-align:center;
      border-radius:4px;
      flex:none;
      height:70vh;

   

 
      &.active {
        transform:scale(5);
      }

      &.loaded {
        
      }
    
  }
  ::-webkit-scrollbar {
display: none;
}
  @keyframes floating {
      0% { transform: translate(0,  0px); }
      50%  { transform: translate(0, 15px); }
      100%   { transform: translate(0, -0px); }   
  }

Vue

new Vue({
  el: '#app',
  
   data() {
    return {
      numDoors:1,
   
        perRow: 5
    }
  },
  mounted() {
      this.setDoorPositions();
      let component = this;
      window.addEventListener('resize', function() {
        component.setDoorPositions();
      });
    },
  methods: {

      setDoorPositions() {
    
        let firstDoor = this.$refs[`door-1`];
      
        let firstDoorRect = firstDoor.getBoundingClientRect();

        let offsetX = 50,
          offsetY = 50,
          currentRow = 0;

        let  x = 0,
            y = 0;


        for (let i = 1; i <= this.numDoors; i++) {

          let doorNum = 'door-' + i;
          let currentDoor = this.$refs[doorNum];
          console.log('HERE');
          let currentDoorRect = currentDoor.getBoundingClientRect();

     
          if (i != 1) {


            let prevDoor = this.$refs[`door-${i - 1}`];
            let prevDoorRect = prevDoor.getBoundingClientRect();
            let prevDoorProps = {
              left: prevDoorRect.left,
              height: prevDoorRect.height,
              width: prevDoorRect.width,
              x: prevDoorRect.x,
              y: prevDoorRect.y
            };
        // set x and y based on prev door
           if (i % this.perRow == 1) {
              x = (offsetX);
             currentRow++;
    
           } else {
             x = (prevDoorProps.width) + (prevDoorProps.left) + (offsetX);
           }

            if (currentRow > 0) {
              y = ( currentDoorRect.height + (2 * offsetY ) ) * currentRow;
            } else {
              y = offsetY;
            }

        


          } else {
            // // set first door x and y
            x = offsetX;
            y = offsetY;
          }

     
          let transform = 'translate3D(' + x + 'px,' + y + 'px , 0)';
          currentDoor.style.transform = transform;

      

          

        }

       


      },

      moveDoors(e) {
        let mouseX =  e.offsetX;
        let...