I have been searching for hours with no clue about what I am doing. I am using Vue Treeselect inside my js application.

Here is the code that I am using:

<script src="js/vue@^2"></script>
<script src="js/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="css/vue-treeselect.min.css">

<div id="treeselect_container">
    <treeselect id="treeselect_test" name="treeselect_test" @input="onInput" v-model="value" :multiple="false" :options="options" placeholder="Select Content..." />
    <script>
        Vue.component('treeselect', VueTreeselect.Treeselect)
        new Vue({
            el: '#treeselect_container',
            data: {
                value: null,
                options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ]
            },
            methods: {
                onInput(value, id) {
                    console.log(value, id);
                }
            }
        })
    </script>
</div>

Basically I am using the onInput method to get the value for later use, but what I am confused about is how I can select a certain value from the vue treeselect.

I found out that changing the value: null for example to value: a changes the value but the ways that I am familiar with is to reload the page and either use session data or PHP post data. But that is very messy, I know that there are many simpler ways to do it but I failed to find them.

I am new to Vue and this is the only chunk of code that I added to my page everything else is PHP mixed with jquery and plain js. Any help goes a long way. Thanks.