[vue.js / vue-draggable]　複数階層にリストレンダリングされたv-bindディレクティブ（:disabled）を動的に変更を加えたい

初学者です！
お力添えいただけると幸いです。

前提・実現したいこと

複数階層でv-forのリストレンダリングされたv-bind:disabledを特定し、動的に変更を加えたいです。

発生している問題・エラーメッセージ

v-bind:disabledに何かしたの情報を持たせたいが、どのように設定すれば良いか分かりません。
また、DOMから操作しようとしましたが、うまく動きませんでした。
エラーメッセージは、「試したこと」に記載いたしました。

該当のソースコード

vue
1<div v-for="(item, index) in items" :key="item.id">
2   <div v-for="(line, index) in lines" :key="line.id">
3       <div v-for="(tag, index) in tags" :key="tag.id">
4           <draggable
5               :ref="item.id + line.id + tag.id"
6               :disabled="isDrag"
7               @mouseenter.native="isPossible(item.id line.id, tag.id)"
8               @mouseleave.native="isImpossible(item.id, line.id, tag.id)"
9           >
10               <p>テキストテキスト</p>
11           </draggable>
12       </div>
13   </div>
14</div>
15<script>
16	export default {
17        data: function () {
18            return {
19                isDrag: true,
20            }
21        },
22        methods: {
23        	isPossible: function(item, line, tag) {
24        		// isDragをtrueにする
25        	},
26        	isImpossible: function() {
27        		// isDragをfalseにする
28        	}
29        }
30	},
31</script>

試したこと

１．isDrag(item.id, line.id, tag.id)

vue
1<div v-for="(item, index) in items" :key="item.id">
2   <div v-for="(line, index) in lines" :key="line.id">
3       <div v-for="(tag, index) in tags" :key="tag.id">
4           <draggable
5               :ref="item.id + line.id + tag.id"
6               :disabled="isDrag(item.id, line.id, tag.id)"
7               @mouseenter.native="isPossible(item.id, line.id, tag.id)"
8               @mouseleave.native="isImpossible(item.id, line.id, tag.id)"
9           >
10               <p>テキストテキスト</p>
11--- 以下省略 ---
12
13// 描画時に
14// Error in render: "TypeError: _vm.isDrag is not a function"

２．isDrag[item.id + line.id + tag.id]

vue
1<div v-for="(item, index) in items" :key="item.id">
2   <div v-for="(line, index) in lines" :key="line.id">
3       <div v-for="(tag, index) in tags" :key="tag.id">
4           <draggable
5               :ref="item.id + line.id + tag.id"
6               :disabled="isDrag[item.id + line.id + tag.id]"
7               @mouseenter.native="isPossible(item.id, line.id, tag.id)"
8               @mouseleave.native="isImpossible(item.id, line.id, tag.id)"
9           >
10               <p>テキストテキスト</p>
11           </draggable>
12       </div>
13   </div>
14</div>
15<script>
16    export default {
17        data: function () {
18            return {
19                isDrag: true,
20            }
21        },
22        methods: {
23            isPossible: function(item, line, tag) {
24                // isDragをtrueにする
25                console.log(this.isDrag[item + line + tag]);
26            },
27            isImpossible: function() {
28                // isDragをfalseにする
29            }
30        }
31    },
32</script>
33
34// undefined
35→ isDrag[item.id + line.id + tag.id]をdataに指定する方法がわからず

３．isDrag(item.id + line.id + tag.id)

vue
1--- 省略 ---
2<draggable
3   :ref="item.index + line.index + tag.index"
4   :disabled="'isDrag' + item.id + line.id + tag.id"
5   @mouseenter.native="isPossible(item.id, line.id, tag.id)"
6   @mouseleave.native="isImpossible(item.id, line.id, tag.id)"
7>
8--- 省略 ---
9// undefined
10→ 'isDrag' + item.id + line.id + tag.idをdataに指定する方法がわからず（2番同様の原因）