Vue Draggable - 无法让它工作

Question

我正在尝试将可拖动功能添加到组件中。但它似乎不起作用。 这是App.vue文件。

我尝试将列表名称更改为NewCruds，在数据中我尝试返回NewCruds并在deaggable中使用该列表，但之后它不会在页面上显示任何内容。由于组件crud-component未定义，因此给出了错误。我尝试使用

注册组件

name : 'crud-component',

高于数据，但它再次无效。

<template>
    <div id="app">
  <draggable :list="NewCruds" :options="{animation:200}" :element="'crud-component'" @change="runme">    
        <crud-component
                v-for="crud in NewCruds"
                v-bind="crud"
                :key="crud.id"
                :id="crud.id"
                :cardtype="crud.cardtype"
                @delete="del"
                @blur.native ="update"
                :fields ="fields"
                :message ="crud.message"
                :dropoptions = "crud.dropoptions"
        ></crud-component>

  </draggable>
    </div>
</template>

<script>
  function Crud({ id, message, cardtype, dropoptions, position}) {
    this.id = id;
    this.message = message;
    this.cardtype = cardtype;
    this.dropoptions = dropoptions;
    this.position = position;

  }
   import CrudComponent from './mycomponents.vue';
   import draggable from 'vuedraggable'

  export default {



    data() {
      return {
        cruds: [

        ],
     NewCruds = this.cruds,
     fields:[],
      }
    },
    methods: {
      addCard(card_type, event) {
       event.preventDefault()
       var ids = document.getElementById("myids").value;
       var pos = parseInt(document.getElementById("curr_position").value);


          var bodyParameters = {"type" : card_type,"ids" : ids,"text" : "","position" : pos}

          axios.post( 
              '/api/create',
              bodyParameters,
              {
               headers: {
                  'Content-Type': 'application/json',
                }
              }
          ).then((response) => {

              var resp = response.data;

              this.cruds.push(new Crud(resp));
               document.getElementById("curr_position").value = pos + 1;
          }).catch((error) => {
              console.log(error)
          });
      },
      read() {
        this.mute = true;
        var ids = document.getElementById("myids").value;
        axios.get( 
              '/api/block/'+ ids,

              {
               headers: {
                  'Content-Type': 'application/json',
                }
              }
          ).then((response) => {

              var data = response.data
              data.forEach(crud => {
                 this.cruds.push(new Crud(crud));
               });
              console.log(this.cruds);
          }).catch((error) => {
              console.log(error)
          });
      },
      update(id, val) {
        console.log("got the value as : ");
        console.log(val);
      },
      del(id) {
          this.mute = true;
           axios.delete( 
              '/api/delete/'+id,

              {
               headers: {
                  'Content-Type': 'application/json',
                }
              }
          ).then((response) => {

                let index = this.cruds.findIndex(crud => crud.id === id);
                this.cruds.splice(index, 1);
                this.mute = false;
          }).catch((error) => {
              console.log(error)
          });
      },
      runme(){
        console.log("updating");
      }
    },
    watch: {
      mute(val) {
        document.getElementById('mute').className = val ? "on" : "";
      }
    },
    components: {
      CrudComponent,

    },
    created() {

         this.read(); 
    }
  }
</script>

请建议我为实现这项工作需要做出哪些改变。