Moveable controls not scrolling with the content

Question

I am using Moveable library to drag and resize elements.

Below is my code for the vuejs app.

      moveable: {
        draggable: true,
        throttleDrag: 0,
        resizable: true,
        throttleResize: 1,
        keepRatio: false,
        scalable: true,
        throttleScale: 0,
        rotatable: true,
        throttleRotate: 0,
        pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
        origin: false
      }

Below is the HTML code for the same

        <div id="editor">
          <Moveable
           class="moveable"
           v-bind="moveable"
           @drag="handleDrag"
           @resize="handleResize"
           @scale="handleScale"
           @rotate="handleRotate"
           @warp="handleWarp"
           @pinch="handlePinch"
         >
          <span>
           This is moveable div
          </span>
         </Moveable>
       </div>

So it appears like below.

But when I drag the moveable element, controls are not getting dragged along with with the element. It is getting fixed.

I also tried to give the container property to the moveable object like this container: document.getElementById('editor'), but then also it's not working as expected.

I am not sure what the problem is.