How to add Lenis Scroll on a specific div with VueJS

Question

I have a problem with Lenis Scroll on Vue3.
When I'm using it on the html tag, it works fine, no problem.

But I can't get it to work on a div/component that is further down, instead of on the html tag.

html > body > #app > some div > #lenis-target

According to the documentation, I am putting the following code in a lenis.js file, which I'm adding into the body via a script tag inindex.html:

const lenis = new Lenis({
  content: document.getElementById('lenis-target')
})
function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

But #lenis-target doesn't exist yet when this script is run. Doesn't work.

So I'm trying to move this lenis creation onto the mounted() of my app for instance.
It works, but if I do so, I can't call the "lenis" object anywhere anymore, with a "lenis.stop()" for instance.
It's returning lenis is not defined even though the div with lenis is still here in my viewport.

My question is :
What should I do so that I can add Lenis onto a specific div which gets mounted a few seconds after the site starts, and still be able to access the lenis object anywhere?

Setup :

• "@studio-freight/lenis": "^1.0.27"

• "vue": "^3.2.41"

• "vue-router": "^4.1.6",