Vue.js 1.0 method not firing on change select

Question

Following Vue.js 1.0 examples, I've made a select dropdown with v-model project, like this:

{{ project }}
<select class="projects" v-model="project" @change="changeProject">
    <option value="1">School</option>
    <option value="2">Personal</option>
    <option value="3">Work</option>
</select>

The js bit:

new Vue({
    el: '#main',
    data: {
        project: ''
    },
    methods: {
        changeProject: function(){
            console.log(this.project);
        }
    }
});

The tag {{ project }} is displaying correctly, but when I select another value on the select dropdown it doens't fires the method changeProject.

What am I missing here?

Cheers.

EDIT:

After @mustafo's answer, I tried to create a simple button with a @click method and it print the value. Only the @change on this select isn't working.

EDIT2:

I've realised why this is not working. I'm changing the selected option of this select box with an jquery function, because I needed to create a full css styled dropdown, and then I created a "mask" for it.

Answer 1

Well, I've run into this issue as well. The proper solution according to me is add v-model to select tag and then add watching of that model into watch object:

watch: {
    myModel: function(currentValue) {

        // do my stuff
    }
}

Answer 2

Seems like your version of vue.js does not support shorthands. Try v-on:change="..." instead of @change="..."