mounted called on navigation but render is delayed

[vuejstime]

Environment

Nuxt CLI v3.0.0-27292434.d68318f

• Operating System: Linux
• Node Version: v16.11.1
• Nuxt Version: 3.0.0-27292434.d68318f
• Package Manager: yarn@1.22.5
• Bundler: Vite
• User Config: buildModules, windicss, css
• Runtime Modules: -
• Build Modules: nuxt-windicss@2.0.12

Reproduction

 onMounted(() => {
      nextTick(()=>{
         gsap.registerPlugin(ScrollToPlugin)
      const tl = new gsap.timeline();
      tl.from(".g-head-anime", {
        ease: "power4",
        duration: 0.8,
        autoAlpha: 0,
        x: 200,
        stagger: 0.3,
        onComplete: () => {
          completeAnimation.value = true;
          gsap.set(".g-head-anime", { clearProps: "transform" });
        },
      })
      });
    });

am using gsap for animate some text on mounted i even used nextTick but issue is still exist

Describe the bug

the issue is : when am hard reload the page it's totally okay but when i navigate to the page gsap can't file the node with class g-head-anime that's mean during navigate mount called a little faster than dome render. but when i'm setting time out in mounted it works as expected.

Additional context

No response

Logs

No response

[danielroe]

I think this is not an issue with Nuxt, but with how the Vue rendering lifecycle works (and possibly also how your component is being rendered). I'd recommend you raise this as a discussion instead of a bug report.

[fanckush]

@vuejstime here's a workaround #13471