【Vue.js】dragしたアイテムの情報をdrop時に受け渡したいです。

Question

###やりたいこと
Vue.jsでdrag&dropの実装をしているところですが、drop時にdragしたアイテムの情報を渡すことができず、所持したアイテムごとに動作を分けることができなくて困っています。

ドロップ時に発生したエラー文

[Vue warn]: Property or method "$block" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ vue.js:634
warnNonPresent @ vue.js:2047
has @ vue.js:2092
drop @ VM1152:3
invokeWithErrorHandling @ vue.js:1863
invoker @ vue.js:2188
original._wrapper @ vue.js:7547

###現在のコード

  <div id="app">
    <div>
      <table id="snaptarget" class="ui-widget-header">
        <tr v-for="(boardRow, y) in mainBoard" :key="y">
          <td v-for="(cell, x) in boardRow" :key="x" 
          class="MainTableCell" 
          :class="`is-${cell.code}`"
          @click="onClick(y, x)"
          @dragover.prevent
          @dragenter.prevent
          @drop="droptable($event, cell)"
          >
          </td>
        </tr>
      </table>
    </div>
    {{message}}
    <section 
    draggable
    v-for="($block, bi) in blocks" :key="bi"
    @dragstart="dragstartblock($event, $block)"
    >
      <div v-for="(w, wi) in $block.data">
        <table>
          <tr v-for="(blockTR, yi) in w" :key="yi" class="TR">
            <td v-for="(blockTD, xi) in blockTR" :key="xi" 
            @click="onClick(yi, xi)" 
            :style="makeColor(blockTD)"
            >
              <div v-if="blockTD" class="TTG">
                {{blockTD}}
              </div>
            </td>
          </tr>
        </table>
      </div>
    </section>
  </div>

const blocks = {
      1:{
        data:[[
           [1, 1, 0, 0, 0],
           [0, 1, 0, 0, 0],
           [0, 1, 0, 0, 0],
           [0, 1, 0, 0, 0],
           [0, 0, 0, 0, 0],  
        ]],
      },
      2:{
        data:[[
          [1, 0, 0, 0, 0],
          [1, 1, 0, 0, 0],
          [0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0],  
        ]],
      },
    };
    const mainBoard = []
      for (let y = 0; y < 20; y++ ) {
        const boardRow = []
        for (let x = 0; x < 20; x++){
          const cell = {
            y: y,
            x: x,
            code: 0,
          }
          boardRow.push(cell)
        }
        mainBoard.push(boardRow)
      };
    const draggable = window['vuedraggable'];
// ここからvue.js記述
    const app = new Vue({
      el: '#app',
      components: {
      'draggable': draggable,
      },
      data: {
        TD:"TD",
        message:"",
        mainBoard: mainBoard,
        blocks:blocks,
      },
      methods: {
        onClick: function (y, x) {
          // y, x はそれぞれの座標
          console.log(y, x)
          this.message = "Click y:" + y + " x:" + x
        },
        dragstartblock(event, block){
          console.log(event);
          console.log(block);
        },
        droptable($event, cell){
          console.log($block);
          console.log(cell);
        },
        makeColor (value) {
          return {
            'background': value === 0 ? 'none' : 'black'
          }
        },
      },
    })

.bord{
    height: 82px;
    width: 82px;
    background-color: black;
}

.bordRow{
    background-color: rgb(133, 71, 71);
    border: rgb(249, 237, 237) 1px solid;
}

.bordCell{
    height: 12px;
    width: 12px;
    background-color: rgb(12, 134, 122);
    border: black 1px solid;
    display: inline;
}
.MainTableCell{
    height: 20px;
    width: 20px;
    border: solid black 1px;
}

.TR{
    border: black solid 1px;
}

.TD{
    background-color: cadetblue;
    height: 30px;
    width: 30px;
    border: coral 1px solid;
}

.is-2{
    background-color: blueviolet;
}

表示画面

試したこと

blockの情報を受け渡したかったため、$をつけグローバル関数にし、引数として渡してみましたが上記のエラーが発生してしまいました。

Answer 1

data{}に保存用に空のデータオブジェクトを作り、dragした情報をそこに一度保持させることで、drop時にもdragしたデータを使うことができました。

最適かどうかは分かりませんがこの方法で試していきたいと思います。