title: Implementing Vue draggable with cards?
body: <p>I am trying to implement <code>vuedraggable</code> with Vuetify Cards but for some reason the drag and drop doesn't work when the cards are in a single row but works when they are in a column. </p>
  
  <p>Check out this working <a href="https://codesandbox.io/s/youthful-shockley-g608z?file=/src/components/Parent.vue" rel="nofollow noreferrer">CodeSandbox</a>.</p>
  
  <p>In the <code>Parent.vue</code> file, if i remove the <code>&lt;v-layout&gt; &lt;/v-layout&gt;</code> wrapping the <code>&lt;HelloWorld /&gt;</code> component, the cards go into a column and the drag and drop starts working again. </p>
  
  <p>This is my HelloWorld component:-</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-flex xs4&gt;
      &lt;v-card class="mx-4"&gt;
        &lt;v-img :src="src"&gt;&lt;/v-img&gt;
        &lt;v-card-title primary-title&gt;
          &lt;div&gt;{{title}}&lt;/div&gt;
        &lt;/v-card-title&gt;
      &lt;/v-card&gt;
    &lt;/v-flex&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "HelloWorld",
    props: {
      title: String,
      src: String,
      id: Number
    },
    data() {
      return {};
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my Parent component:-</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-container&gt;
      &lt;v-layout class="mt-5 align-center justify-center row fill-height"&gt;
        &lt;h2&gt;Parent Component&lt;/h2&gt;
      &lt;/v-layout&gt;
      &lt;draggable v-model="draggableCards"&gt;
        &lt;v-layout&gt;
          &lt;template v-for="(tech,i) in getCardArray"&gt;
            &lt;HelloWorld :src="tech.src" :title="tech.title" :key="i"/&gt;
          &lt;/template&gt;
        &lt;/v-layout&gt;
      &lt;/draggable&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters, mapMutations } from "vuex";
  import HelloWorld from "./HelloWorld";
  import draggable from "vuedraggable";
  export default {
    components: {
      draggable,
      HelloWorld
    },
    computed: {
      ...mapGetters({
        getCardArray: "getCardArray"
      }),
      draggableCards: {
        get() {
          return this.$store.state.cardArray;
        },
        set(val) {
          this.$store.commit("setCardArray", val);
        }
      }
    },
    methods: {
      ...mapMutations({
        setCardArray: "setCardArray"
      })
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>If someone can help me figure this out, i sure would appreciate it. Thank you.</p>