Radio buttons in Vuejs 2.0 - vue.js

Question

I'm building a small application in VueJS 2.0 and I'm using Inspinia premium admin template, where I'm having a radio buttons something like this:
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white active">
<input type="radio" v-model="taskTime" value="7" name="taskTime"> Week
</label>
<label class="btn btn-sm btn-white">
<input type="radio" v-model="taskTime" value="30" name="taskTime"> Month
</label>
</div>
When any of the buttons being selected or if taskTime data is changed I'm calling a function, so for this I've watch function:
watch: {
taskTime(newValue) {
console.log('clicked');
}
}
I'v properly defined v-model/data in my data set
data() {
return {
taskTime: ''
}
},
JSFiddle in my case: https://jsfiddle.net/60q14y26/
I don't know why it is not working, I guess something is preventing from executing this. Help me out with these.
Thanks

Answer 1

<div id="app">
<div data-toggle="buttons" class="btn-group">
taskTime {{ taskTime }}
<label class="btn btn-sm btn-white active">
<input type="radio" v-model="taskTime" value="7" name="taskTime"> Week
</label>
<label class="btn btn-sm btn-white">
<input type="radio" v-model="taskTime" value="30" name="taskTime"> Month
</label>
</div>
</div>
var vm = new Vue({
el: '#app',
data() {
return {
taskTime: null
}
},
watch: {
taskTime(newValue) {
console.log('clicked');
}
}
})
This is working snippet. You missed one "}" in your fiddle ;)
jsfiddle
version with counter
And one more thing: your build system can remove console.log from final code.