[Vuejs]-Vue toggle class for dropdown menu

Something like this:

<template>
  <ul>
    <li :class="{'active-submenu': activeEmail}">
      <a href="#" @click.prevent="activeEmail = !activeEmail">
        <i class="uil-envelope-alt"></i>
        <span>Email</span>
      </a>
      <ul>
        <li>
          <a href="email-inbox">Inbox</a>
          <a href="email-inbox-read">Email Read</a>
          <a href="email-compose">Email Compose</a>
        </li>
      </ul>
    </li>
    <li :class="{'active-submenu': activeCommerce}">
      <a href="#" @click.prevent="activeCommerce = !activeCommerce">
        <i class="uil-shopping-basket"></i>
        <span>E-commerce</span>
      </a>
      <ul>
        <li>
          <a href="shop-card">Products Grid</a>
        </li>
        <li>
          <a href="shop-listing">Products List</a>
        </li>
        <li>
          <a href="shop-product">Product</a>
        </li>
      </ul>
    </li>
    </li>
  </ul>
</template>

<script>
export default
{
  name: 'MyCustomMenu',
  data()
  {
    return {
      activeEmail: true,
      activeCommerce: false,
    }
  }
}
</script>