test.vue

<style>
	.border-1px {
		border: 1px solid #e3e3e3;
	}
	.screen {
		display: flex;
		background-color: white;
	}
	.device-inner-content {
		align-self: flex-end	
	}
	.full-width {
		width: 100%;
	}
</style>

<template>
    <div>
        <app-header>
            <template v-slot:left-navbar>
                <v-toolbar-title class="mr-3">Main Menu</v-toolbar-title>
            </template>
            <template v-slot:right-navbar>
				<div class="d-custom-flex">
					<v-switch v-model="isEnabled" color="primary" :label="getLabelName(isEnabled)"></v-switch>
					<v-btn class="v-step-2 upgrade-btn" color="primary" tag="link">Update Main Menu</v-btn>
				</div>
            </template>
        </app-header>

        <v-container fluid>
			<app-card>
				<v-layout wrap>
					<v-flex xl5 lg5 md5 sm5 xs12>
						<!-- <v-card class="elevation-5"> -->
						<Tree :data="tree1data" draggable="draggable" cross-tree="cross-tree" @drag="ondrag" @change="tree1Change">
							<div slot-scope="{data, store}">
								<template v-if="!data.isDragPlaceHolder">
									<!-- <b v-if="data.children &amp;&amp; data.children.length" @click="toggleOpen(data, store)">
										{{data.open ? '-' : '+'}}&nbsp;
									</b> -->
									<!-- <span>{{data.text}}</span> -->
									<popup-menu :data="data" :store="store" :text="data.text"></popup-menu>
								</template>
							</div>
						</Tree>
					</v-flex>
					<v-flex xl2 lg2 md2 sm2></v-flex>
					<v-flex xl5 lg5 md5 sm5 xs12>
						<div class="device-wrapper">
							<div class="device" data-device="Pixel" data-orientation="portrait" data-color="white">
								<div class="screen" style="pointer-events: all">
									<!-- PUT CONTENTS HERE -->
									<div class="device-inner-content full-width">
										<persistant-menu :data="data ? data : tree1data"></persistant-menu>
									</div>
								</div>
							</div>
						</div>
					</v-flex>
				</v-layout>
			</app-card>
        </v-container>
    </div>
</template>

<script>
import { DraggableTree } from 'vue-draggable-nested-tree'
import Header from "Components/Header/Header.vue"
import PopupMenu from './PopupMenu.vue';
import PersistantMenu from './PersistantMenu.vue';
import * as th from 'tree-helper'
export default {
	data(){
		return {
			isEnabled: false,
			tree1data: [
				{text: 'Main menu - A', selected: false},
				{text: 'Main menu - B', children: [
					{text: 'Child of main menu B'}
				], selected: false},
				{text: 'Main menu - C', children: [
					{text: 'Child of main menu C'}
				], selected: false}
			],
			maxLevel: 2,
			fav: true,
			menu: false,
			message: false,
			hints: true,
			expand: false,
			selected: [2],
			data: null
		}
	},
	components: {
		appHeader: Header,
		Tree: DraggableTree,
		PopupMenu: PopupMenu,
		PersistantMenu: PersistantMenu
	},
	methods: {
		getLabelName(state){
			return state ? 'Enabled' : 'Disabled';
		},
		addChild() {
			this.tree1data[0].children.push({text: 'child'});
		},
		toggleOpen(data){
			debugger;
		},
		ondrag(node) {
			// const {maxLevel} = this
			let nodeLevels = 1
			th.depthFirstSearch(node, (childNode) => {
				if (childNode._vm.level > nodeLevels) {
					nodeLevels = childNode._vm.level
				}
			})
			nodeLevels = nodeLevels - node._vm.level + 1
			const childNodeMaxLevel = this.maxLevel - nodeLevels
			th.depthFirstSearch(this.tree1data, (childNode) => {
				if (childNode === node) {
					return 'skip children'
				}
				if (!childNode._vm) {
					console.log(childNode);
				}
				this.$set(childNode, 'droppable', childNode._vm.level <= childNodeMaxLevel)
			})
		},
		tree1Change(node, targetTree) {
			this.data = targetTree.getPureData();
		},
	}	
}
</script>