Why element of a box not moving from one box to another while dragging and dropping?

Question

I'm using Vue draggable and while dragging an element from one box to another it is getting move to the same box but can't drop/move in other boxes. Let say I want to move '1' from box 1 to box 2. It is not draggable to another box. To show how data is in array, I've used show data button to log data. To check the order of the element.

What is the problem here?

VUE CODE

<template>
  <div id="app">
    <!-- LOG ALL DATA -->
    <button type="button" name="button" @click="showData()">show data</button>

    <div class="container">
      <draggable :list="numbers[index]" class="box" v-for="(array, index) in numbers">
        <div class="heading">
          box {{ index  + 1}}
        </div>
          <div class="box-data" v-for="x in array">
            {{ x }}
          </div>
      </draggable>
    </div>

  </div>
</template>

<script>
 import draggable from 'vuedraggable'

export default {
  data(){
    return {
      numbers: [
        [1, 2, 3, 4, 5],
        [6, 7, 8],
        [9, 10, 11, 12]
      ],
    }
  },
  components: {
    draggable,
  },
  methods: {
    showData() {
        console.table(this.numbers);
    },
  }
}
</script>

<style>

  #app{
    height: 100%;
  }

  html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
  }

  button{
    padding: 1rem;
    margin: 1rem;
    background-color: #984636;
    color: white;
  }

  .container{
      background-color: bisque;
      padding: 16px;
      margin: 16px;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
  .box{
    width: 300px;
    height: 100%;
    background-color: pink;
  }

  .box-data{
    padding: .5rem;
    margin: 1rem;
    background-color: #f6f7f8;
  }
  .heading{
    text-align: center;
    margin-top: 1rem;
  }
</style>

Answer 1

Add a prop group="boxes" to the draggable component