title: Vue Draggable - Dynamically Change Component After Drag/Drop
body: <p>I have two separate dragAreas and when I drag components from one area to another, how can I dynamically change the status of my component based on the area it was dragged to?</p>
  
  <p>Currently, I'm rendering the status from the serializer but I want to change it dynamically after drag/drop.</p>
  
  <pre><code>&lt;draggable
    class="dragArea published"
    :options="{ group: { name: 'g1', put: 'g1'}, animation: 120 }"
    @end="onEnd"&gt;
      &lt;div
        v-for="lesson in classroomLessonsPublished"
        :class="`lesson-card ${lesson.id}`"
        data-status="published"&gt;   
          &lt;div&gt; 
            {{ lesson.status }}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/draggable&gt;
  
  &lt;draggable
    class="dragArea unpublished"
    :options="{ group: { name: 'g1', put: 'g1'}, animation: 120 }"
    @end="onEnd"&gt;
      &lt;div
        v-for="lesson in classroomLessonsUnpublished"
        :class="`lesson-card ${lesson.id}`"
        data-status="unpublished"&gt;   
          &lt;div&gt; 
            {{ lesson.status }}
          &lt;/div&gt;
     &lt;/div&gt;
  &lt;/draggable&gt;
  </code></pre>