Vue.js 类星体动态复选框在加载时不为空

当我尝试有多个复选框时，它们中没有一个是空的。请参阅代码笔：

很简单，我只想在加载页面时，所有的页面都是空的。 我怎样才能解决这个问题

<div id="q-app">
  <div class="q-pa-md">
    <div class="q-gutter-sm">
      <span  v-for="(c,index) in categories">
      <q-checkbox v-model="val[index]" :label="c.label"></q-checkbox>
      </span>
    </div>

    <div class="q-px-sm">
    </div>
  </div>
</div>


new Vue({
  el: '#q-app',
  data () {
    return {
      val: [],
categories:[{id:1,label:'crime'},{id:2,label:'fun'},{id:3,label:'other'}]
    }
  }
})

新Vue({
el:“#q-app”，
数据（）{
返回{
val:[]，
类别：[{id:1，标签：'crime'}，{id:2，标签：'fun'}，{id:3，标签：'other'}]
}
}
})

所以，在尝试了所有方法之后，我看到了一个解决了这个问题的页面

这是正确的做法：