I am trying to create a modal dialog in Vue. When the dialog is open, I want the page scrolling to be disabled but the user should still be able to scroll the dialog, and I was trying to achieve this with preventDefault. My component looks like this:

<!--Modal.vue-->
<template>
  <div v-show="open" class="modal" @scroll.stop.prevent @wheel.stop.prevent>
    <div class="mask"></div>
    <div class="overlay">
      <div class="dialog">
        <button @click="$emit('close')">CLOSE</button>
        <Paragraphs />
      </div>
    </div>
  </div>
</template>

<script>
import Paragraphs from "./Paragraphs";
export default {
  components: {
    Paragraphs,
  },

  props: {
    open: Boolean,
  },
};
</script>

<!--some scoped CSS here-->

Full working example on the sandbox https://codesandbox.io/s/optimistic-pond-3zrxsf

The problem is that while this arrangement is preventing page scrolling, it is also freezing scrolling on the dialog itself, which I don't want. And apparently stopPropagation only prevents bubbling up, but not down the DOM tree, so that isn't helping either. What can I do to achieve this?

Note: I do not want to set the overflow-y property of the body tag as that takes away the scrollbars completely and has a jittery effect of everything shifting to the side by a few pixels when the dialog is opened or closed.