[Vuejs]-Using plain JS in Vue.js Component

Assuming you have your markup (html and css) as part of one component, getting the toggle to add/remove a class would be really simple, you just need to have a method toggle the active state and a data property to keep the data. An example would be better, so here it goes.
In your component object:

{
    data() {
        return {
            isActive: false
        }
    },

    methods: {
        toggleMenu(){
            this.isActive = !this.isActive
        }
    }
}

In your markup you need this

<div class="button_container" id="toggle" :class="{'active': isActive}" @click="toggleMenu">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</div>
------------------------------------
<div class="overlay" id="overlay" :class="{'open': isActive}">
<nav class="overlay-menu">
  <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

That should get you going, just note i used the shorthand form for v-on and for v-bind

EDIT:
Here’s also a link to an updated pen with the whole example