How do I add a class when the button is clicked?

Why not just use jQuery to solve this issue-

<button v-on:click="makeRed" id="mybutton">

and in your method,

makeRed: function() {
    $( "#mybutton" ).addClass( ".red" );    
}

https://vuejs.org/v2/guide/class-and-style.html

<button v-on:click="makeRed" v-bind:class="{someProperty: red}">

Do it is a data-centric way by adding a boolean property to your component with you update whenever the button is clicked

<div id="vue-instance">
    <span>{{ message }}</span>
    <ol>
        <li v-for="x in items">
            {{ x.title }}
        </li>
    </ol>
  
    <button v-on:click="makeRed" :class="{'red': isRed}">
        Click Me
    </button>
</div>

var vm = new Vue({
    el: '#vue-instance',
    data: {
        message: 'Hello',
        isRed: false,
        items: [
            {title: 'Item 1'},
            {title: 'Item 2'},
            {title: 'Item 3 ' + new Date() }
        ]
    },
    methods: {
            makeRed: function() {
                this.isRed = true;
        }
    }
});

Vue will apply the red class whenever isRed evaluated to true.

@mikoo

Made an example on jsbin check this out

https://jsbin.com/gozisejaba/edit?html,js,output

Hi guys. I found a way, but I think im gonna stick to jQuery in this situation.

<div id="vue-instance">
  <span>{{ message }}</span>
  <ol>
    <li v-for="x in items">
      {{ x.title }}
    </li>
  </ol>
  
  <button v-on:click="makeRed" v-bind:class="{red: isActive}">
  Click Me
  </button>
</div>

var vm = new Vue({
  el: '#vue-instance',
  data: {
    isActive: false,
    message: 'Hello',
    items: [
        {title: 'Item 1'},
      {title: 'Item 2'},
      {title: 'Item 3 ' + new Date() }
    ]
  },
  methods: {
    makeRed: function() {
        this.isActive = !this.isActive;
    }
  }
});