Update active menu item when watching the changes

[tobegit3hub]

Here is the example code.

<template>
  <div>
    <a-menu :default-selected-keys="[activeMenu]" mode="vertical" theme="dark">
      <a-menu-item key="component-a">
        <router-link to="/component-a">Component A</router-link>
      </a-menu-item>
      <a-menu-item key="component-b">
        <router-link to="/component-b">Component B</router-link>
      </a-menu-item>
      <a-menu-item key="component-c">
        <router-link to="/component-c">Component C</router-link>
      </a-menu-item>
      <a-menu-item key="component-d">
        <router-link to="/component-d">Component D</router-link>
      </a-menu-item>
    </a-menu>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: 'component-a',
    };
  },
  watch: {
    $route(to, from) {
      this.activeMenu = to.name || 'component-a';
    },
  },
};
</script>