Function is getting called twice

Below is the code I am using <v-select v-model="selectedCategory" label="title" :on-change="setFeatures()" :options="categories"></v-select>

in methods: setFeatures: function () { console.log('here') }

As the page loads, I can see that, ‘here’ is getting printed twice.

One more weird bug: <v-select v-model="selectedCategory" label="title" :on-change="setFeatures()" :options="categories"></v-select>

<v-select multiple v-model="selectedFeatures" label="feature_name" :options="features"></v-select> Whenever I change the value in second select, ‘setFeatures’ function is getting called.

[sagalbot]

If you look at the source, onChange is what internally triggers the v-model syncing. Since you’re overriding it, selectedCategory won’t get updated. Remove your on-change callback and that watcher should fire.

[pradeepb6]

That did the trick. Thank you. But still not sure why it did not work when used with function. 😃