如何将mysql查询数据插入到任务卡列表的vue.component中

Question

I'm building task/cards each with lists and need to add list items to the cards via mysql query. I need help to replace the static list entries with information from a mysql query to the vue data in java script?

I have all of the front end code working properly but only with the static list. Once I figure out how to auto fill the card with the mysql query data I should be able to figure out the inserts and edits on my own.

#HTML Snippet

<div id="vue-example">
  <div id="drag-scope">
    <div class="column">
      <div class="title">Monday</div>
      <todo-container class="regular green lighten-6" :data="todos.monday">
        <todo-item v-for="(todo, index) in todos.monday" :data="todo" @remove="todos.monday.splice(index, 1)"></todo-item>
      </todo-container>
    </div>
  </div>
</div>


#Java Script
<script> 
Vue.component('todo-container', {
  template: '<div class="todo-container"><slot></slot></div>',
  props: ['data']
});
Vue.component('todo-item', {
  template: `
<div class="z-depth-3 todo-item">
<div class="content lmdd-block">
<i class="material-icons handle">reorder</i>
<a class="remove" @click="$emit('remove')"><i class="material-icons">clear</i></a>
<div class="task">{{data}}</div>
</div>
</div>
`,
  props: ['data']
})
var vueExample = new Vue({
  el: '#vue-example',
  data: {
    newTodoText: '',
    todos: {
      sunday: [],
      monday: [],
      tuesday: [],
      wednesday: [],
      thursday: [],
      friday: [],
      saturday: [],
      regular: [
        'list item1',
        'list item2',
        'list item3'
      ],
      priority: [],
      done: []
    }
  },
  mounted: function() {
    lmdd.set(document.getElementById('drag-scope'), {
      containerClass: 'todo-container',
      draggableItemClass: 'todo-item',
      handleClass: 'handle',
      dataMode: true
    });
    this.$el.addEventListener('lmddend', this.handleDragEvent);
    this.$el.addEventListener('lmddstart', this.handleDragStart);
  },
  methods: {
    handleDragStart: function() {
       this.dragEvent = true;
     },
    handleDragEvent: function(event) {
      var newIndex = event.detail.to.index;
      var oldIndex = event.detail.from.index;
      var newContainer = event.detail.to.container.__vue__.data;
      var oldContainer = event.detail.from.container.__vue__.data;
      if (event.detail.dragType === 'move') {
        newContainer.splice(newIndex, 0, oldContainer.splice(oldIndex, 1)[0]);
      }
    },
    addNewTodo: function() {
      this.todos.regular.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})
</script>