为什么“@drop”事件在vue中对我不起作用？

<template>
  <div>
    <div class="drag" draggable="true" @dragstart="dragStart">拖动我</div>
    <div class="drop" @dragover="dragOver" @drop="drop">放置区域</div>
  </div>
</template>

<script>
export default {
  methods: {
    dragStart(event) {
      // 设置拖动的数据
      event.dataTransfer.setData("text/plain", event.target.id);
    },
    dragOver(event) {
      // 阻止默认行为，允许放置
      event.preventDefault();
    },
    drop(event) {
      // 获取拖动的数据并进行处理
      const data = event.dataTransfer.getData("text/plain");
      console.log("拖动的数据：", data);
    }
  }
};
</script>

<style>
.drag {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

.drop {
  width: 200px;
  height: 200px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 200px;
}
</style>