I can successfully add a class on mouseover with Vue. But I want to remove the class when the mouse leaves the element. What is the idiomatic way of handling this in Vue?

<template>

  <div id=navigation>

    <div class=nav-container>

      <nav>

        <router-link to=/ class=home>Ping Party</router-link>

        <div class=navigation-actions>

          <router-link to=/sign_in v-if=!isLoggedIn class=sign_in>Sign In</router-link>

          <router-link to=/sign_up v-if=!isLoggedIn @mouseover.native=mouseOver class=sign_up ref=sign_up>Sign Up</router-link>

          <router-link to=/users v-if=isLoggedIn class=users>Users</router-link>

          <v-btn :click.prevent=signOut() v-if=isLoggedIn>Sign Out</v-btn>

        </div>

      </nav>

    </div>

  </div>

</template>



<script>

  import SignUp from ../forms/SignUp;

  import SignIn from ../forms/SignIn;



  export default {

    components: {

      SignUp,

      SignIn

    },

    computed: {

      isLoggedIn () {

        return this.$store.getters.isLoggedIn

      }

    },

    methods: {

      signOut: function() {

        this.$store.commit(LOGOUT)

        this.$store.commit(FLASH_MESSAGE, {

          message: Signed Out Successfully,

          show: true,

          styleClass: error,

          timeOut: 4000

        })

        this.$router.push('/')

      },

      mouseOver: function() {

        this.$refs.sign_up.$vnode.elm.classList.add(hovered)

      }

    }

  }

</script>

As you can see on mouseover I call the mouseOver function and this successfully adds the class to the element. But now when the users leaves the element the class remains. How can I have the class remove when the user leaves the element? Thanks for the help.