title: Why doesn't the '@drop' event work for me in vue?
body: <p>The <code>@drop</code> listener doesn't work for me. It doesn't call the method I'm telling it to call.</p>
  <p>I want to drag the chip and be able to drop it on another component, and perform a function, but at the time of dropping the chip, the <code>dropLink</code> method is not executed, so I assume that the <code>@drop</code> event is not emitted.</p>
  <p>No errors are displayed on the console.</p>
  <p>The rest of the events do work well, like <code>@dragstart</code>.</p>
  <p>This is the code of the component I use:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div
      @keydown=&quot;preventKey&quot;
      @drop=&quot;dropLink&quot;
    &gt;
      &lt;template
        v-if=&quot;!article.isIndex&quot;
      &gt;
        &lt;v-tooltip bottom&gt;
          &lt;template v-slot:activator=&quot;{ on }&quot;&gt;
            &lt;v-chip
              small
              draggable
              class=&quot;float-left mt-2&quot;
              v-on=&quot;on&quot;
              @dragstart=&quot;dragChipToLinkToAnotherElement&quot;
            &gt;
              &lt;v-icon x-small&gt;
                mdi-vector-link
              &lt;/v-icon&gt;
            &lt;/v-chip&gt;
          &lt;/template&gt;
          &lt;span&gt;Link&lt;/span&gt;
        &lt;/v-tooltip&gt;
  
        &lt;v-chip-group
          class=&quot;mb-n2&quot;
          show-arrows
        &gt;
          &lt;v-chip
            v-for=&quot;(lk, index) in links&quot;
            :key=&quot;index&quot;
            small
            outlined
            :class=&quot;{'ml-auto': index === 0}&quot;
          &gt;
            {{ lk.text }}
          &lt;/v-chip&gt;
        &lt;/v-chip-group&gt;
      &lt;/template&gt;
  
      &lt;div
        :id=&quot;article.id&quot;
        spellcheck=&quot;false&quot;
        @mouseup=&quot;mouseUp($event, article)&quot;
        v-html=&quot;article.con&quot;
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'ItemArticle',
    props: {
      article: {
        type: Object,
        required: true
      }
    },
    computed: {
      links () {
        return this.article.links
      }
    },
    methods: {
      mouseUp (event, article) {
        this.$emit('mouseUp', { event, article })
      },
      preventKey (keydown) {
        this.$emit('preventKey', keydown)
      },
      dragChipToLinkToAnotherElement (event) {
        event.dataTransfer.setData('text/plain', this.article.id)
      },
      dropLink (e) {
        //but this method is never called
        console.log('evento drop is ok', e)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>In the project I am also using Nuxt in case that is relevant.</p>