How to use the vue-router.onBeforeRouteUpdate function in vue-router

store.commit(
                "routeData",
                !clear
                    ? {
                          filters: provider.value?.filters?.length ?? 0,
                          invalid: {
                              general: invalid.value,
                          },
                      }
                    : null,
            );
        };

        onBeforeRouteLeave(beforeRoute);

        onBeforeRouteUpdate(beforeRoute);

        onBeforeMount(() => applyRouteParams());

        onMounted(() => {
            ui.title(`${i18n.t("labels.providers._", 2)} – ${i18n.t("labels.adminPanel")}`);

            reset(true);
        });

        onBeforeUnmount(() => updateRouteData(true));

        watch(
            () => provider.value?.connector.type,
            async to => {
                support.value = to
                    ? await defineAsyncComponent(() => import(/* webpackMode: "eager" */ `./form/${to}.vue`))

!clear
                    ? {
                          invalid: {
                              general: invalid.value,
                          },
                          link: link.value,
                          items: dashboard.value?.items?.length ?? 0,
                          variables: variables.value?.length ?? 0,
                      }
                    : null,
            );
        };

        onBeforeRouteLeave(beforeRoute);

        onBeforeRouteUpdate(beforeRoute);

        onBeforeMount(() => applyRouteParams());

        onMounted(() => {
            ui.title(`${i18n.t("labels.dashboards._", 2)} – ${i18n.t("labels.adminPanel")}`);

            reset(true);
        });

        onBeforeUnmount(() => updateRouteData(true));

        //     watch(
        //         dashboard,
        //         async to => {
        //             if (!to) {
        //                 return;

? {
                          invalid: {
                              general: invalid.value,
                          },
                          link: link.value,
                          markers: chart.value?.options?.markers?.length ?? 0,
                          series: chart.value?.series?.length ?? 0,
                          variables: variables.value?.length ?? 0,
                      }
                    : null,
            );
        };

        onBeforeRouteLeave(beforeRoute);

        onBeforeRouteUpdate(beforeRoute);

        onBeforeMount(() => applyRouteParams());

        onMounted(() => {
            ui.title(`${i18n.t("labels.charts._", 2)} – ${i18n.t("labels.adminPanel")}`);

            reset(true);
        });

        onBeforeUnmount(() => updateRouteData(true));

        watch(
            chart,
            async to => {
                if (!to) {
                    return;