Vue.js binding problem

Vue fails to bind to an object property if that property isn't pre-defined in the data.

by karthick6891

HTML

<div id="view-main">
  <button :class="[{ 'is-loading': (rowState[2] == 1) }, {'is-success': (rowState[2] == 2) }]" @click="changeRowState(2)">
    Test
  </button>
</div>

CSS

.is-loading {
  background: red;
}

.is-success {
  background: green;
}

JavaScript

new Vue({
		el: '#view-main',
    data: {
       rowState: {},
    },
    methods: {
        changeRowState(rowID) {
        		this.rowState[rowID] = 2 //will not work.
            this.$set(this.rowState, rowID, 2) //will work
        },
    }
})