Reports

So the CSS and the toggleScroll function to hide the scroll work, it seems to be a problem with Vue.

I don't know what your setup is and I'm not very familiar with Vue, but, refactoring the code like below works as expected, so can you check if your function is ruining, do you get any warnings/errors in your console ? Are you using their CLI ?

const {
  createApp,
  ref
} = Vue

createApp({
  data: () => ({
    isScrollLocked: ref(false),
  }),

  methods: {
    toggleScrollLock() {
      this.isScrollLocked = !this.isScrollLocked
      if (this.isScrollLocked) {
        document.body.style.overflow = "hidden"
      } else {
        document.body.style.overflow = ""
      }
    },
  },
}).mount("#app")

.container {
  /* Make the page tall so we can easily see scroll locking. */
  height: 2000px;
  background-color: #fafafa;
  padding: 20px;
  font-family: sans-serif;
}

button {
  margin: 20px;
  padding: 10px 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>
<div id="app" class="container">
  <div class="container">
    <button @click="toggleScrollLock">
    {{ isScrollLocked ? 'Unlock Scroll' : 'Lock Scroll' }}
    </button>
    <p>Scroll down to test. When locked, the page shouldn’t scroll.</p>
  </div>
</div>

79331570