How to change the properties of the parent component when vue markdown loader parses the, router view update of the component generated by md

when registering a route with vue router, component is generated by parsing the md file with vue markdown loader

router.component = r =>
          require.ensure([], () => r(require(`../docs/${router.name}.md`)));

the page structure is as follows:

<template>
      <router-view :class="$style.view"></router-view>
      <anchor-nav :anchos="textAnchors"></anchor-nav>
</template>

now, when the router-view is updated, you need to get the id, of some elements of dom in the updated router-view to be used as anchor navigation.

document.querySelectorAll("h2")

what should I do?
method that has been tried now:
1. The parent component mouted and update both call document.querySelectorAll ("H2") once, and it"s okay to get this value, but the page will get stuck when passing this value to anchor-nav in the above example. I don"t know why.
2. Use vue router"s navigation guard
but according to the complete navigation parsing process of the official website:

1 navigation is triggered.
2 is called away from the guard in the deactivated component.
3 invokes the global beforeEach guard.
4 invokes the beforeRouteUpdate guard (2.2 +) in the reused component.
5 calls beforeEnter in the routing configuration.
6 parses the asynchronous routing component.
7 calls beforeRouteEnter in the activated component.
8 calls the global beforeResolve guard (2.5 +).
9 Navigation confirmed.
10 calls the global afterEach hook.
11 triggers a DOM update.
12 calls the callback function passed to next in the beforeRouteEnter guard with the created instance.

cannot get the value of dom in router view after dom update.

ask the bosses if there is a better way. Personally, I can also think of a way to define mouted,update these methods for parsing generated components, but I don"t know what to do = _ =.

Jul.12,2021

resolved.
refer to Vuejs technology to reveal the data changes in
vue to re-render DOM is an asynchronous process, which occurs in the next tick.
if some of our methods rely on DOM changes after data modification, we must execute them after nextTick. For example, the following pseudo code:

getData(res).then(()=>{
  this.xxx = res.data
  this.$nextTick(() => {
    //  DOM
  })
})

then you can get the latest dom in nextTick for operation.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7c181f-1f9d6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7c181f-1f9d6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?