vue自定义指令-实现按钮控制元素拖拽

1、要求：
(1) 每次打开页面时，拖拽元素不可拖动，单击按钮后可以拖动元素，再次点击按钮，元素又不可拖动了。
(2) 第一个按钮控制第一个div元素拖拽，第二个按钮控制第二个div元素拖拽，而且它们互不影响。
2、问题：
(1)前面写的拖拽代码，再次点击按钮后，元素还可以继续拖动。
(2)点击其中一个按钮，另一个按钮的状态也改变了，两个元素都可以拖拽，无法实现一对一控制元素拖拽

3、解决：
(1) 绑定元素时，添加一个binding参数(钩子函数的参数之一)，它是钩子函数提供的一个对象,
modifiers(一个包含修饰符的对象)与value(指令的绑定值)是binding对象的属性
(2) 因为bind钩子函数只调用一次，指令第一次绑定到元素时调用，当状态发生改变时，就不再触发了；
使用componentUpdated()钩子函数，指令所在组件的虚拟dom节点及其子节点全部更新后调用

html代码：
两个按钮，两个div，两个按钮分别控制两个是否可拖拽，互不影响。

 <div id="app">
       <!-- limit是自定义指令修饰符-->
        <div id="box" class="dv" v-drag.limit="isDrag"></div> 
        <div id="box2" class="dv" v-drag.limit="isDrag2"></div>

        <!-- 事件绑定 @事件名称="方法" -->
        <button id="btn" @click="isDrag=!isDrag">我开始拖拽了{
  {isDrag}}</button>
        <button id