VueJS Recusive API调用良好做法

Question

对于API开发和Web开发人员来说，我是一个相当陌生的人，我试图了解在我的VueJS应用中进行可调用的api调用的最佳做法。

数据：

类别

ID | ParentID |   Name
============================
1  |   NULL   |   Car
2  |   NULL   |   Bikes
3  |     1    |   Sports Car
4  |     2    |   Sport Bike
5  |     3    |   SuperBike

我正在调用API来检索那些猫，并从具有NULL ParentID的人开始创建一个DropDown项。

App.vue

<b-dropdown v-for="item in categories" :key="item.id" v-bind:text="item.name" id="ddown1" class="m-md-1">

export default {
  name: "app",
  components: {
    Top,
    Side,
    Center
  },
  data() {
    return {
      msg: "USAFE",
      categories:[]
    }
  }, 


   created: function()
        {
            this.fetchItems();
        },

        methods: {
            fetchItems()
            {
              let uri = 'http://localhost:8180/unv-api/categorie/search/rsql?query=ParentId==NULL';

             this.axios.get(uri).then((response) => {
                  this.categories = response.data._embedded.categories;
              });

            }
        }
};

现在，我想使用ParentId属性为子项添加子下拉列表。

实现这样的目标的最佳实践是什么？

谢谢。