Only add linkExactActiveClass in specific layout and page

I'm relatively new to Vue. I have a multi-layout on my app, but only one router.

I followed this tutorial for context. I want to only add active classes on a specific layout and page. For example, I only want active classes on the admin layout navigation, not on the landing page layout navigation. How do I achieve this?

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { routes } from "./routes.js";
import { createRouter, createWebHistory } from "vue-router";

const app = createApp(App);

const router = createRouter({
  history: createWebHistory(),
  routes,
  linkExactActiveClass: "active",
});

app.use(router);
app.mount("#app");

routes.js

import Home from "./views/Home.vue";

import Dashboard from "./views/app/Dashboard.vue";

export const routes = [
  {
    path: "/",
    component: Home,
    meta: { layout: "LandingLayout", title: "Home" },
  },
  {
    path: "/user",
    component: Dashboard,
    meta: { layout: "AppLayout", title: "Dashboard" },
  },
];

App.vue

<template>
  <component :is="layout" />
</template>

<script>
import LandingLayout from "@/layouts/LandingLayout.vue";
import AdminLayout from "@/layouts/AdminLayout.vue";

export default {
  components: {
    LandingLayout,
    AdminLayout,
  },
  data() {
    return {
      layout: null,
    };
  },
  watch: {
    $route(to) {
      if (to.meta.layout !== undefined) {
        this.layout = to.meta.layout;
      } else {
        this.layout = "LandingLayout";
      }
    },
  },
};
</script>

Any help would be much appreciated.