I'm making a discussion board website in VueJS, and one of the features I am making is to reply to comments. I want to have a little link/button that says "-Replying to post no. 3" for example. And when you click that link/button, the page will scroll up to the comment.

This is all easy stuff to do, I just make sure to select the comment div that is being replied to with

comm = document.querySelectorAll(".comment")

then when you click the button to see the replied comment, I run

this.comm.scrollIntoView({
   block: 'start',
   behavior: 'smooth',
   inline: 'start'
});

This all works fine for me, the problem is that I'm trying to use firebase to store my data for the comment objects. Right now I create a comment object like so:

var tempCommentObj = {
   commentName: this.name,
   commentReply: "-Replying to post no." + this.cArr.commentID,
   commentText: this.text,

   //more declarations
   commentReplyDiv: commR //commR being the comment element in question
   }

Then I push it into the comment array like this this.actualArr.push(tempCommentObj);

So I want to have an HTML element as an item in my object so I can scroll up to it later when I press the button. However, firebase doesn't let you store Elements, only strings, numbers, objects, dates etc. but no Elements

So I've tried to stringify with String() the element so I can store it as a string on the database, then unstringify it later when I want to press the button. And I actually do get back the right thing

<div class="comment" data-v-133ed8df>...</div> But it's just a copy of the element and not the real element, so when I try to scrollIntoView it doesnt do anything.

There has to be a better way of doing this, I would appreciate someone's knowledge

(I have also tried getting the y position of the element using getBoundingClientRect() and doing it that way, but for some reason, it would never work, and the further down the page, the more negative the y would get. Maybe that's the smarter way of doing this but I couldnt get it to work with)