Возможно ли в Vue вывести данные формата [{...}, {...}, ...]

Есть API. С него приходят подобные данные:

[
  {
    "id": "1", 
    "name": "some name1", 
    "description": "some discription1"
  }, 
  {
    "id": "2", 
    "name": "some name 2", 
    "description": "some discription2"
  },
  ...
]

На Vue я забираю эти данные с помощью axios следующим образом:

var app = new Vue({
        el: '#app',
        data() {
            return {
                catalogs: null
            };
        },
        mounted() {
            axios
              .get('http://127.0.0.1:8000')
              .then(response => (this.catalogs = response));
          }
    });

И пытаюсь вывести на страницу:

<div id="app">
    <ul>
        <li v-for="catalog in catalogs">
        ID: {{ catalog.id }}
        <br>
        Name: {{ catalog.name }}
        <br>
        Description: {{ catalog.description }}
        </li>
    </ul>
</div>

Но ничерта не выходит (Что, возможно, естественно). Данные приходят в [ ], но взаимодействовать с ними не выходит.

По этому вопрос:

Такие структуры вообще можно разложить, или обязателен json?

Например:

{'catalogs': [
              {
                "id": "1", 
                "name": "some name1", 
                "description": "some discription1"
              }, 
              {
                "id": "2", 
                "name": "some name 2", 
                "description": "some discription2"
              },
              ...
             ]
}

UPD:

Вариант с this.catalogs = response.catalogs все так же не работает

created: function () {
            const vm = this;
            axios
                .get('https://127.0.0.1:8000')
                .then(function (response) {
                    this.catalogs = response.catalogs;
                })
            }

Вот какие данные приходят с axios:

введите сюда описание изображения


Ответы (0 шт):