Vue.js嵌套表单的2级和json的复选框

Question

在我的Vue.js前端应用程序中，我想创建表单以将POST json数据发送到REST API。表单有一个部分，我从API获取json数据，这是可能添加组的列表。

Vue.js代码看起来像

git log

和模板

<script>
  export default {
    data () {
      return {
        line: {
          name: '',
          buttons: [{
            name: '',
            state: false,
            is_reported: '',
            assignmentGroups: [{
              name: ''
            }]
          }]
        },
        assignmentGroupsList: []
      }
    },
    methods: {
      addButton () {
        this.line.buttons.push({
          name: '',
          state: false,
          is_reported: ''
        })
      },
      deleteButton (index) {
        this.line.buttons.splice(index, 1)
      },
      saveLine () {
//        this.$http.post('http://127.0.0.1:8001/api/line')
//          .then(response => response.json())
//          .then(result => this.lines = result)
        console.log(JSON.stringify(this.line))

      },
      fetchAssignmentGroups() {
        this.$http.get('http://127.0.0.1:8001/api/agroup')
          .then(response => response.json())
          .then(result => this.assignmentGroupsList = result)
          .then(result => console.log(result))
      }
    },
    created: function () {
      this.fetchAssignmentGroups();
      //this.fetchLines();
    }
  }
</script>

在浏览器中，我可以正确地看到每个添加按钮中的组列表但是全部。它没有获得数据。