Mi objetivo es recuperar la altura desplazable completa de mi página usando:

 document.body.scrollHeight

pero todo lo que obtengo es la altura de la ventana gráfica y no la altura completa de la página desplazable.

Estoy ejecutando esto en un método que se llama después de montarlo. Incluso está en una función nexttick. Necesito esto para colocar imágenes al azar en toda la altura de la página. ¿Podría tener algo que ver con la reactividad de Vue (?) Y el DOM no se actualiza lo suficientemente rápido para que mi método obtenga la altura completa del documento.

¿De qué manera diferente puedo obtener la altura de desplazamiento de un documento en Vue que realmente funcionará?

 <script> export default { data() { return { images: [ require("@/assets/img/icons/1.png"), require("@/assets/img/icons/2.png"), ], addedImage: [], imgTop: 150, imgLeft: 900, imgHeight: 64, imgWidth: 64, selectedImage: "", nextId: 100, }; }, mounted() { this.randomImage(); this.$nextTick(() => { for (let i = 0; i < 40; i++) { this.randomImage(); this.addImage(); this.randomPosition(); } }); }, methods: { randomImage() { const idx = Math.floor(Math.random() * this.images.length); this.selectedImage = this.images[idx]; }, randomPosition() { const randomPos = (twoSizes) => Math.round(Math.random() * twoSizes); this.imgTop = randomPos(document.body.scrollHeight - this.imgHeight); this.imgLeft = randomPos(window.innerWidth - this.imgWidth); }, addImage() { this.addedImage.push({ style: { top: `${this.imgTop}px`, left: `${this.imgLeft}px`, height: `${this.imgHeight}px`, width: `${this.imgWidth}px`, }, src: this.selectedImage, id: this.nextId++, }); }, }, }; </script>