[Vuejs]-Vue.js v class binding is overriding other bindings and not removing classes properly

First of all you can’t have 2 class bindings on the same element, nor should you need them.

You have quite a lot of logic regarding adding/removing classes, so i would suggest extracting it to a computed:

computed: {
  className () {
      let classes= [];
          if (this.animationToggle){
             classes.push(this.activeClass)
          }
          else{
             classes.push('swingLeft')
          }
      return classes;

      }
  }
}


<div id="bag" :class="className"></div>