How to change a tree programmatically based on event

[alemicro]

Question:

I have two tree one with directory and one with the list of file and directory, in two separate boxes.

How can clicking on a directory of the first tree to see only the files on the second tree corresponding to the directory?

here my code

<div class="row" id="treeView">
        <div class="tree-container col-md-3">
            <sl-vue-tree
                    v-model="leftFrontTree"
                    ref="slVueTree"
            >


                <template slot="title" slot-scope="{ node }">
                    <span class="item-icon">
                        <i class="fa fa-folder" v-if="!node.isLeaf"></i>
                        <i class="fa fa-file-alt" v-if="node.isLeaf"></i>
                    </span>

                    {{ node.title }}
                </template>

                <template slot="toggle" slot-scope="{ node }">
                  <span v-if="!node.isLeaf">
                    <i v-if="node.isExpanded" class="fa fa-chevron-down"></i>
                    <i v-if="!node.isExpanded" class="fa fa-chevron-right"></i>
                  </span>
                </template>

                <template slot="sidebar" slot-scope="{ node }">
                  <span v-if="node.isLeaf" class="visible-icon" @click="event => listFiles(event, node)">
                    <i class="fa fa-eye"></i>
                  </span>
                </template>

            </sl-vue-tree>

        </div>

        <div id="fileListId" class="col-md-3">
            <sl-vue-tree
                    v-model="frontTreeFull"
                    ref="refFrontTreeFull"
            >
                <template slot="title" slot-scope="{ node }">
                    <span class="item-icon">
                        <i class="fa fa-file"></i>
                    </span>

                    {{ node.title }}
                </template>

                <template slot="sidebar" slot-scope="{ node }">
                    <span class="visible-icon" @click="event => preview(event, node)">
                        <i class="fa fa-eye"></i>
                    </span>
                    <span class="visible-icon" @click="event => download(event, node)">
                        <i class="fa fa-cloud-download-alt"></i>
                    </span>
                </template>
            </sl-vue-tree>
        </div>
        <div id="filePreview" class="col-md-3">
            <h3>qui va l'anteprima del pdf</h3>

        </div>
    </div>

---

the javascript method tha I want to call

listFiles: function (event, node) {
                        debugger
                        event.stopPropagation();
                       
                        this.$refs.refFrontTreeFull = this.$refs.refFrontTreeFull.getNode(node.path);
}