sample.vue

<template>
    <div class="savings-deposit entity-info no-tab">
        <b-card no-body>
            
            <div class="m-3">
                <b-card class="mb-0">
                    <b-tree 
                        id="tree" 
                        ref="tree"
                        :data="tree_data">
                    </b-tree>
                </b-card>
            </div>
        </b-card>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import LiquorTree from 'liquor-tree'
    import InquiryService from '../services/Inquiry'

    const PAGE = 'ChartOfAccountsInquiry'

    const treeEventsList = [
        { name: 'tree:mounted', args: ['Tree Component'] },
        { name: 'tree:filtered', args: ['Matches', 'Filter String'] },
        { name: 'tree:data:fetch', args: ['Parent Node'] },
        { name: 'tree:data:received', args: ['Parent Node'] },

        { name: 'node:disabled', args: ['Node']},
        { name: 'node:enabled', args: ['Node']},
        { name: 'node:shown', args: ['Node'] },
        { name: 'node:hidden', args: ['Node'] },
        { name: 'node:dblclick', args: ['Node'] },
        { name: 'node:selected', args: ['Node'] },
        { name: 'node:unselected', args: ['Node'] },
        { name: 'node:checked', args: ['Node'] },
        { name: 'node:unchecked', args: ['Node'] },
        { name: 'node:expanded', args: ['Node'] },
        { name: 'node:collapsed',  args: ['Node'] },
        { name: 'node:added',  args: ['Node', 'New Node'] },
        { name: 'node:removed',  args: ['Node'] },
        { name: 'node:text:changed', args: ['Node', 'New Text', 'Old Text']},

        { name: 'node:editing:start',  args: ['Node'] },
        { name: 'node:editing:stop',  args: ['Node', 'isTextChanged'] },
    ]

    let key = 0

    var vm

    export default {
        name: PAGE,
        components: {
            bTree: LiquorTree
        },
        computed: {
            ...mapGetters({
                getBranchCode: 'Company/getBranchCode'
            }),
            mode () {
                return this.$route.query.mode
            },
            treeEventsList () {
                return this.tree_events
            }
        },
        methods: {
            init () {
                localforage.getItem('coa').then(async coa => {
                    if(_.isEmpty(coa)) {
                        let payload = {
                            brcode: this.getBranchCode
                        }

                        await InquiryService.getCOAList(this, payload).then(response => {
                            localforage.setItem('coa', response.data)

                            this.tree_data = this.generateTree(response.data)
                        })
                    } else {
                        this.tree_data = this.generateTree(coa)
                    }
                })
            },
            generateTree (data) {
                var obj = []
                var index = _.mapKeys(data, 'coaid')

                data = _.map(data, coa => { 
                    coa.text = coa.coaid + ' ' + coa.coadesc 
                    return coa
                })

                _.forEach(index, v => {
                    if(!v.coaacct_sum) {
                        obj[v.coaid] = v
                    } else{

                        if(!index[v.coaacct_sum].children){
                            index[v.coaacct_sum].children = []
                        }

                        index[v.coaacct_sum].children.push(v)
                    }
                })
                return obj
            }
        },
        created () {
            vm = this
            this.init()
        },
        mounted () {
            treeEventsList.forEach(e => {
                this.$refs.tree.$on(e.name, e => {
                    console.log(e)
                })
              })
        },
        data () {
            return {
                tree_data: [],
                tree_events: [],
                busy: false
            }
        }
    }
</script>