Vue не обновляет select в DOM после созданного метода

Question

У меня есть этот массив roles, в методе created я сделал вызов для диспетчеризации и получения ролей из вызова API, поэтому я предполагаю, что он должен загружаться с созданной функцией.

Теперь я использую console.log для печати ролей после отправки getRoles и он уже печатает, но не обновляется в DOM.

Если вы заметили эту часть, где я просто показываю {{roles}} внутри компонента после формы и выпадающего меню, эту часть и выберите обновления после небольшого изменения компонента и сохранения, после горячей перезагрузки он показывает данные, ноне в первый раз с created

Проблема в в том, что данные выбираются и печатаются при первой загрузке, но массив ролей не обновляется в DOM.

<template>
  <div class="container">
    <form class="card offset-3 col-6 text-center border border-light p-5">
      <div class="form-group">
        <label for="formGroupExampleInput">Roles</label>
      </div>

      <select class="browser-default custom-select">
        <option selected>Choose a role to assign permissions</option>
        <option v-for="role in roles" key="role.display_name" value="1"> {{role.name}} </option>
      </select>

    </form>
    roles :{{ roles }}
  </div>
</template>

<script>
export default {
  data: {
    return: {
      roles: [] 
    }
  },
  created() {
      this.$store
        .dispatch('getRoles')
        .then(() => {
          this.roles = this.$store.getters.getRoles
          console.log('roles', this.roles)
        })
        .catch(() =>  { 
          console.log('roles request failed')
        })
  }
}
</script>

Answer 1

Проблема была в возврате данных, поэтому я заменил его на

data: () => ({
      roleName: '',
      roles: [] 
    })

, и теперь он работает нормально