Как заполнить компонент v-select данными json, поступающими из axios.get

Question

Я с трудом пытаюсь заполнить компонент v-select данными из бэкэнда. Данные бэкэнда представлены в формате json.

Массив items_category не хранит данные. Итак, я вижу «Нет данных» в моем v-select. Может кто-нибудь помочь мне. Благодарю. Это мой код:

<v-select v-model="category" :items="items_category" chips dense></v-select>

data () {
  return {
    category: '',
    items_category: [],
    categories: [],
    i: 0
  }
},

created () {
  this.initialize()
},

methods: {
    initialize () {
        axios.get('http://localhost:4000/categories', {
            })
                .then(response => { 
                    this.categories = response.data

                    for (this.i=0; this.i<this.categories.length; this.i++) {
                        this.items_category[this.i] = this.categories[this.i].category_name
                    }
                })
                .catch(function (error) {
                    console.log(error);
            }) 
    }
}

Это мой JSON (http://localhost:4000/categories):

[
  {
    "id": 1,
    "category_name": "Name 1",
    "category_description": "Description 1"
  },   
  {
    "id": 2,
    "category_name": "Premium",
    "category_description": "Description 2"
  },
  {
    "id": 3,
    "category_name": "Free",
    "category_description": "Description 3"
  }
]

Answer 1

Хорошо, я понял это правильно, используя метод push

this.items_category.push(this.categories[this.i].category_name)