vue draggable

Question

<draggable v-model="tags2" :options="dragOptions1">
        <transition-group tag="ul" class="list-group">
          <li class="list-group-item" v-for="(element, index) in tags2" :key="index">
            <!-- {{element.name + index}} -->
            <component :is="element.type" :orderNo="index + 1"></component>
          </li>
        </transition-group>
      </draggable>
      
      tags2: [
        {
          id: 1,
          name: '文本',
          type: 'textfield'
        },
        {
          id: 2,
          name: '多选题',
          type: 'textfield'
        }
      ]
      
      dragOptions1 () {
      return {
        group: 'haha'
      }
    }

请问下为啥我写成{{element.name + index}}上面代码里面注释部分就能够排序
但是写成<component :is="element.type" :orderNo="index + 1"></component>就无法拖拽顺序呢？