How to read the data-* of an element in VueJs?

I have 4 buttons with a color, and I try to change the background color of a div according to the button clicked. I'm having trouble reading the data-color object of the button and use it in vue, how do i do this?

My code:

<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="green">Green</button>
            </div>
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="blue">Blue</button>
            </div>
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="yellow">Yellow</button>
            </div>
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="red">Red</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="colorblock center-block">
                    
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            changeColor: function() {
                // Things i tried
                // console.log(this.data-color);
                // console.log(this[data-color]);
            }
        }
    });
</script>

I'm having a hard time understanding how this works in Vue... Also how do i target .colorblock and change it's css?

Thanks in advance

Attach it to the event and read the dataset like so.

new Vue({
  el: '#app',
  methods: {
    changeColor: function(evt) {
      console.log(evt.target.dataset.color);
    }
  }
});