Vue 2.0+ Draggula，v-for中的数据流，每个元素的v-model的单独作用域

Question

首先查看此示例：https://jsfiddle.net/9Lk3pfdw/

<div id="app">
  <div class="row">
    <div class="col p-3" style="border: 1px solid gray;">
      <draggable element="ul" v-model="todos" :options="listOptions">
        <transition-group type="transition" :name="'flip-list'">
          <li class="d-flex align-items-center align-content-center" v-for="element in todos"
              :key="element.order">
            {{element.text}}
          </li>
        </transition-group>
      </draggable>
    </div>
    <div class="col p-3" style="border: 1px solid gray;">
      <draggable element="div" v-model="todos2" :options="contentOptions">
        <transition-group name="no" class="component-drop-area" tag="ul">
          <div class="component" v-for="(childElement, index) in todos2" :key="index">
            <div class="d-flex row-nowrap px-2 pb-2">
              <input class="w-100" type="text" v-model="childElement.text">
              <div class="my-handle">X</div>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>

  <div class="row pt-3" style="background-color: drak-gray;">
    <div class="col">
      <h4>I don't want to change</h4>
      <hr>
      <pre>{{ listString }}</pre>
    </div>
    <div class="col">
      <h4>I want to change</h4>
      <hr>
      <pre>{{ list2String }}</pre>
    </div>
  </div>
</div>

我想要的是将右列中每个元素的数据分开。我不确定为什么v-model或v-for会绑定这样的变量。也许是特定于它的Draggula ...我感谢任何建议。