title: Vue JS toggle html div class on a button click not working
body: <p>I am currently learning Vue.js for a project I am busy with.
  I have been learning through online resources, as well as a Udemy course by Maximilian Schwarzmüller, Which i'd highly recommend.</p>
  
  <p>I am having an issue building a hamburger menu for practice purposes.
  I am adding/removing a class on a div which holds my menu content. The adding/removing of the class happens via a button click (my "hamburger").</p>
  
  <p>As far as I can tell through my course and other online sources, including a good few StackOverflow questions, what I have done should work.</p>
  
  <p>Please let me know if you can see any issues, as it isn't working in my codepen.
  Thanks in advance =) </p>
  
  <p>relevant HTML:</p>
  
  <pre><code>&lt;button v-on:click="isActive = !isActive" class="navigation-hamburger"&gt;
    &lt;p&gt;-&lt;br&gt;-&lt;br&gt;-&lt;/p&gt;
  &lt;/button&gt;
  
  &lt;div class="menu-contain" v-bind:class="{ active: isActive}"&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#" class="links"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="links"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="links"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu-contain {
    width: 100%;
    height: 0px;
    background-color: #09333C;
    transition: all 0.5s linear;
  }
  
  .active {
    width: 100%;
    height: 300px;
    background-color: #8BAFB5;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s linear;
  }
  </code></pre>
  
  <p>Vue js: </p>
  
  <pre><code>new Vue({
    el: '#wrap',
    data: {
      isActive: false
    }
  });
  </code></pre>
  
  <p>Here is the codepen:</p>
  
  <p><a href="https://codepen.io/-Infamous/pen/KvXNJB" rel="nofollow noreferrer">https://codepen.io/-Infamous/pen/KvXNJB</a></p>