Vue draggable

<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"
      }
    }

Why can I write {{element.name + index}} the comments in the above code to sort
but not drag and drop as < component: is= "element.type": orderNo= "index + 1" > < / component >?

Apr.02,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b306e3-2bd28.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b306e3-2bd28.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?