Drag & Drop

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Drag & Drop</title>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/liquor-tree"></script>
</head>
<body>
  <div id="app">
   <button @click='reload()'>
     reload
   </button>
    <tree
      ref='tree'
      :data="treeData"
      :options="treeOptions"
      @node:dragging:start="logDragStart"
      @node:dragging:finish="logDragFinish"
    />
  </div>
  <script>
	var ver = 0;

    new Vue({
        el: '#app',
        data: () => ({
          // treeData: getTreeData(),
          treeData: [],
          treeOptions: {
            propertyNames: {
              text: 'MY_TEXT',
              children: 'KIDS',
              state: 'OPTIONS',
              
            },
            utoCheckChildren: false,
            dnd: true,
            checkbox: true,
            autoCheckChildren: false
          }
        }),
        
        methods: {
        	logDragStart(node) {
          	console.log('Start dragging: ' + node.text)
          },
          
        	logDragFinish(targetNode, distinationNode) {
          	console.log(`Stop dragging: [TARGET]${targetNode.text}`)
          },
          reload(){
            ver++;
          	let data = getTreeData();
          	this.$refs.tree.setModel(data);
          	alert('updated, version ' + ver);
          }
        }
      })

      function getTreeData() {
      
        return [
          {
            MY_TEXT: 'Root A, version ' + ver,
            OPTIONS: { expanded: true },
            KIDS: [
              { MY_TEXT: 'Getting Started (NOT DRAGGABLE)', OPTIONS: { checked: true, draggable: false } },
              { MY_TEXT: 'JavaScript Code Style', OPTIONS: { selected: true } },
              { MY_TEXT: 'MVC Pattern (NOT DROPABLE)', OPTIONS: {dropable: false} },
              { MY_TEXT: 'MVP Pattern' },
              { MY_TEXT: 'MVVM Pattern' },
              { MY_TEXT: 'The Good Parts', KIDS: [
   ...