How to detect change in vue treeselect

Question

I am using vue treeselect to select multiple week days from a dropdown list. It works well but I want to run a piece of code when a change is made. I have read the documentation but don't understand how to use an event. Think I may need the select event. Any help is appreciated!

HTML:

<treeselect :multiple="true"
        :options="options"
        :openOnClick="true"
        :clearable="false"
        :beforeClearAll="false"
        :allowClearingDisabled="true"
        :select="dayChange()" //I know this doesn't work!
        v-model="days" /> <treeselect-value :value="days" />

JS:

vm = new Vue({
        el: ".my-app",
        data: {
            ...,
            options: [
                { id: 1, label: "Monday" },
                { id: 2, label: "Tuesday" },
                { id: 3, label: "Wednesday" },
                { id: 4, label: "Thursday" },
                { id: 5, label: "Friday" },
                { id: 6, label: "Saturday" },
                { id: 7, label: "Sunday" }
            ],
            ...
        },

        methods: {
            dayChange: function () {
                alert("changed");
            },
        }
})

Answer 1

You're misusing the event, you shouldn't bind the event to its handler as follows :

@select="dayChange"

or

v-on:select="dayChange"

the : binding sign is used for props not events

in your method you should have :

   methods: {
            dayChange: function (node, instanceId) {
                alert("changed");
            },
        }