feat: update the page title using a watcher

Added a watcher (watchEffect) to App.vue to update the page title
always when a dependency changes. The afterEach hook was removed from
the router.

src/App.vue

@@ -18,13 +18,19 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
+import { updatePageTitle } from './router';
 import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
-import { ref, provide, watch } from 'vue';
+import { ref, provide, watch, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
 const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
 watch(colorScheme, val => updateColorScheme(val))
+
+watchEffect(() => updatePageTitle(route));
 </script>
 
 <template>