モーダルの表示をした時に背景がスクロールしないようにしたい

Question

Vue.jsを用いて画面を開いたタイミングでモーダル表示をするように実装しています。
モーダル内ではスクロールを可能にし、背景はスクロールしないようにしたいのですが、うまくいかないためご教授いただければと思います。

試したこと
JavaScriptのtouchmoveとwheelで制御することでモーダル表示の時に背景となるメイン画面がスクロールしないように実装をしようと試みました。
モーダル表示時に画面全体を覆うような薄い黒色の背景をつける都合上、JavaScriptの処理自体は行われてもスクロールができてしまいます。

該当のコードは以下の通りです。

メイン画面

<template>
  <div>
    <Modal v-if="isModal" @closeModal="closeModal" @stop="stop"/>
    <div class="hello" ref="main">
      <button @click="stop()">ストップ</button>
      <button @click="start()">スタート</button>
      <button @click="openModal()">ダイアログ開く</button>
      <p>
        For a guide and recipes on how to configure / customize this project,<br>
        check out the
        <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
      </p>
      <h3>Installed CLI Plugins</h3>
      <ul>
        <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
        <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
      </ul>
      <h3>Essential Links</h3>
      <ul>
        <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
        <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
        <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
        <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
        <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
      </ul>
      <h3>Ecosystem</h3>
      <ul>
        <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
        <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
        <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
        <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
        <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
import Modal from "@/components/modal.vue"
export default {
  components: {
    Modal
  },
  data() {
    return {
      isModal: false,
    }
  },
  methods: {
    handleTouchMove(event) {
      event.preventDefault();
    },
    stop() {
      const main = this.$refs.main;
      main.addEventListener('touchmove', this.handleTouchMove, { passive: false });
      main.addEventListener('wheel', this.handleTouchMove, { passive: false });
    },
    start() {
      const main = this.$refs.main;
      main.removeEventListener('touchmove', this.handleTouchMove, { passive: false });
      main.removeEventListener('wheel', this.handleTouchMove, { passive: false });
    },
    closeModal() {
      this.isModal = false
    },
    openModal() {
      this.isModal = true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.openModal()
    })
  }
}
</script>

モーダル

<template>
  <div>
    <div class="modal-bg d-flex justify-content-center h-100 w-100 align-items-center position-fixed"
    @click.self="clickCloseBtn()" ref="modal">
      <div class="bg-white contents" ref="contents">
        <p class="mb-2">ダイアログ</p>
        <p class="mb-2">ダイアログ</p>
        <p class="mb-2">ダイアログ</p>
        <p class="mb-2">ダイアログ</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    clickCloseBtn() {
      this.$emit('closeModal')
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$emit('stop')
    })
  }
}
</script>
<style>
.modal-bg {
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.5);
  z-index: 10;
}

.modal-bg .contents {
  z-index:20;
  width:80%;
  height: 10%;
  overflow: auto;
}
</style>

よく方法として目にする
「モーダル表示前のスクロール位置を取得→モーダル表示のタイミングでposition:fixedを設定し、topに先ほど取得したスクロール位置を設定」
といった方法も試したのですが、今回のような画面を開いた時にスクロール位置を取得する場合iPhoneのSafariではスクロール位置の取得がうまくできず、setTImeoutで位置取得の処理を遅らせるといった方法を取ることになりそうです。
どれくらいの時間遅らせるかといった当たりをつけて実装をするのはベストとは言えないと考えています。
実装としては以下のようになるイメージです。

this.$nextTick(() => {
  window.scrollTo(0,scrollHeight);
  setTimeout(function() {
    this.scrollPosition = window.scrollY; //ここで取得したスクロール位置をtopに設定する
    this.isModal = true
  }, 500)
})