Vue组件未显示嵌套Div

Question

我有一个工作正常的组件。但是，当我将<div :id="hint"></div>附加到组件时，此特定DIV不会呈现。我确定它与我使用DIV引用HTML中的模板的方式有关，但是我不知道如何优化它。

<div
    ref="boxAnswers"
    is="box-answers"
    v-for="box in boxes.slice().reverse()"
    v-bind:key="box.id"
    v-bind:level="box.level"
    v-bind:hint="box.hint"
></div>


Vue.component('box-answers', {
    props: ['level','hint'],
    template: '<div class="droppable answer ui-widget-header" :id="level"></div><div :id="hint"></div>'
});


 new Vue({ 
  el: '#mainapp',
data: {
   boxes: [
        { id: 1, level: 'baselevel-1', hint: 'hint-1' },
        { id: 2, level: 'baselevel-2', hint: 'hint-2' },
        { id: 3, level: 'baselevel-3', hint: 'hint-3' },
        { id: 4, level: 'baselevel-4', hint: 'hint-4' },
        { id: 5, level: 'baselevel-5', hint: 'hint-5' }
    ]
}
  });