message: docs(reflow): add working demo
diff: title: Reflow
  ---
  +The reflow method lets you trigger an action start -> move -> end sequence which
  +runs modifiers and does drop calculations, etc. If your interactable target is a
  +CSS selector, an interaction will be run for each matching element.
  +
  +<LiveDemo :demoHtml="import('@/demos/reflow.html?raw')"/>
  +
  +If the elements have inertia, `endOnly` modifiers and `smoothEndDuration`, then
  +the interactions may not end immediately. The reflow method returns a `Promise`
  +which is resolved when all interactions are complete. So you can `await` or
  +`.then()` multiple reflows
  +
  ```js
  -const interactable = interact(target)
  -const drag = { name: drag, axis: 'x' }
  -const resize = {
  - name: resize,
  - edges: { left: true, bottom: true }
  +const interactable = interact(target).draggable({}).resizable({})
  +
  +async function onWindowResize() {
  + // start a resize action and wait for inertia to finish
  + await interactable.reflow({ name: drag, axis: 'x' })
  +
  + // start a drag action
  + await interactable.reflow({
  + name: 'resize',
  + edges: { left: true, bottom: true },
  + })
  }
  -interactable.reflow(drag)
  -interactable.reflow(resize)
  +window.addEventListener(onWindowResize, 'resize')
  ```
  -
  -The reflow method lets you trigger an action start -> move -> end sequence which
  -runs modifiers and does drop calculations, etc. If your interactable target is a
  -CSS selector, an interaction will be run for each matching element. If the
  -elements have inertia, `endOnly` modifiers and `smoothEndDuration`, then the
  -interactions may be run asynchronously. The reflow method returns a `Promise`
  -which is resolved when all interactions are complete.
  