tampermonkey wait vue hydration finish event

[CroMarmot]

I'm using tampermonkey to write a script to beautify a page, and I need to add a button to the page, but the page will refresh(hydration) automatically after button is added. does vue have a hydration fully loaded event(finished event) for the page that I can listen to?

I've googled and search github issue/discussions, but found nothing help

• 'vue hydration finish event'
• 'tampermonkey wait vue hydration'
• ...

---

reproduce

// ==UserScript==
// @name           Style page
// @description    Style page
// @match          https://www.bilibili.com/video*
// @author         Cro-Marmot([email protected])
// @version        0.0.1
// @run-at         document-idle
// @grant          GM_xmlhttpRequest
// ==/UserScript==
(function () {
    'use strict';
    const waitForElm = (selector) => {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }
            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    observer.disconnect();
                    resolve(document.querySelector(selector));
                }
            });
            // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
            observer.observe(document.body, {
                attributes: false,
                characterData: false,
                childList: true,
                subtree: true,
                attributeOldValue: false,
                characterDataOldValue: false,
            });
        });
    }
    const regOnUrlChange = (fn) => {
        let oldHref = location.href;
        fn();
        // Track pages that don't really reload, but refresh the entire content (like youtube).
        const mutationObserver = new MutationObserver((mutations) => {
            mutations.forEach(function (mutation) {
                if (oldHref != document.location.href) {
                    oldHref = document.location.href;
                    fn();
                    return true;
                }
            });
        });

        mutationObserver.observe(document.body, {
            attributes: false,
            characterData: false,
            childList: true,
            subtree: true,
            attributeOldValue: false,
            characterDataOldValue: false
        });
    };
    // ------------------ lib end ---------------------
    const createButton = async (parentElExp, button_id = 'style_button') => {
        const p = await waitForElm(parentElExp);
        if (document.getElementById(button_id) !== null) {
            console.warn('Button Exist')
            return;
        }
        const button = document.createElement('button');
        button.id = button_id;
        button.innerText = "change style";
        p.appendChild(button);
    };
    // ------------------ main start ---------------------
    regOnUrlChange(() => createButton('.basic-desc-info'));
})();