title: Adding item in draggable component in vue3
body: <p>I am using vue draggable package for my project and here you can see the full component:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;button class=&quot;btn btn-secondary button&quot; @click=&quot;add&quot;&gt;Add&lt;/button&gt;
        &lt;draggable tag=&quot;ul&quot; :list=&quot;list&quot; class=&quot;list-group&quot; handle=&quot;.handle&quot;&gt;
          &lt;li
              class=&quot;list-group-item&quot;
              v-for=&quot;(element, idx) in list&quot;
              :key=&quot;element.name&quot;
          &gt;
            &lt;i class=&quot;fa fa-align-justify handle&quot;&gt;&lt;/i&gt;
  
            &lt;span class=&quot;text&quot;&gt;{{ element.name }} &lt;/span&gt;
  
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;element.text&quot; /&gt;
  
            &lt;i class=&quot;fa fa-times close&quot; @click=&quot;removeAt(idx)&quot;&gt;&lt;/i&gt;
          &lt;/li&gt;
        &lt;/draggable&gt;
  
      &lt;rawDisplayer class=&quot;col-3&quot; :value=&quot;list&quot; title=&quot;List&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { VueDraggableNext } from 'vue-draggable-next';
  let id = 50;
  export default {
    name: &quot;handle&quot;,
    display: &quot;Handle&quot;,
    instruction: &quot;Drag using the handle icon&quot;,
    order: 5,
    components: {
      draggable: VueDraggableNext,
    },
    data() {
      return {
        list: [
          { name: &quot;Navigation&quot;, text: &quot;&quot;, id: 0 },
          { name: &quot;Contact&quot;, text: &quot;&quot;, id: 1 },
          { name: &quot;Products&quot;, text: &quot;&quot;, id: 2 },
        ],
        dragging: false
      };
    },
    computed: {
      draggingInfo() {
        return this.dragging ? &quot;under drag&quot; : &quot;&quot;;
      }
    },
    methods: {
      removeAt(idx) {
        this.list.splice(idx, 1);
      },
      add() {
        id++;
        this.list.push({ name: &quot;Navigation 2 &quot; + id, id, text: &quot;&quot; });
      }
    }
  };
  &lt;/script&gt;
  &lt;style scoped&gt;
    .button {
      margin-top: 35px;
    }
    .handle {
      float: left;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .close {
      float: right;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    input {
      display: inline-block;
      width: 50%;
    }
    .text {
      margin: 20px;
    }
  &lt;/style&gt;
  </code></pre>
  <p>I use vue3 therefore I am using this package <a href="https://www.npmjs.com/package/vue-draggable-next" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-draggable-next</a> to avoid the error <strong>an draggable element must have an item slot</strong> But this time, after I added the item, it automatically reloads. I want to avoid that but I dont know where is wrong.</p>