I'm aiming to retrieve the full scrollable height of my page using:

document.body.scrollHeight

but all I get back is the height of the viewport and not the full height of the scrollable page.

I'm running this in a method that is called after mounted. It's even in a nexttick function. I need this to randomly place images over the full height of the page. It could be something to do with Vue's reactivity(?) and the DOM not updating quick enough for my method to get the full document height?

What is a different way I can get the scroll height of a document in Vue that will actually work?

<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>