[Vuejs]-VueJS v-for inside component template does not seem to be looping

The customer-sentiment component’s template should have only one root element. The template is currently having multiple <div> in first level (rendered from v-for loop), so nesting the current template in a div should fix the problem.

template: `
  <div>
    <div v-for="(item, index) in mutableOptions">
      <h3>{{ index }}<h3>
      <h4>{{ item.Display }}<h4>
    </div>
  </div>`,
created: function() {
  console.log(this.sentimentTypes)
  this.mutableOptions = this.sentimentTypes;
},