Trying to find a Lifecycle hook that worked after switching to a new page VUE

I have page transition animation.
I want after transition find on new page element and change style.
My problem I first change the element and then go to a new page where this element is not changed.
Here link on video how its work now https://www.youtube.com/watch?v=VvmVxd-cmNM

Solution

I am not sure if I get this right but I'll try to answer anyway

I want after transition find on new page element and change style.

Vue <transition> has events for when you want to know if a transition is done.

You might be able to use @leave or @after-leave.

Docs: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

My problem I first change the element and then go to a new page where this element is not changed.

You are structuring your app incorrectly.

I watched the video and it looks like both pages includes your Nav/Sidebar (the right part) thing in each page.

You are structuring your page like this:

PageA.vue

<div id="page-a">
  <!-- this is your left side part -->
  <div id="page-a-content"></div>

  <!-- this is your right side part -->
  <div id="sidebar"></div>
</div>

PageB.vue

<div id="page-b">
  <!-- this is your left side part -->
  <div id="page-b-content"></div>

  <!-- this is your right side part -->
  <div id="sidebar"></div>
</div>

App.vue

<div>
  <!-- This shows PageA.vue OR PageB.vue -->
  <router-view />
</div>

You only have the left-side part changing but not the right-side part.

You should structure it like this:

App.vue

<div>
  <!-- This is your left side part. PageA.vue OR PageB.vue -->
  <router-view />
 
  <!-- This is your right side part -->
  <Sidebar />
</div>

When you change your page, only the <router-view /> will change and not the <Sidebar />