Как исправить раскрывающийся список выбора динамической категории ввода с помощью ajax/json в vuejs

Я разрабатываю шаблон выбора категории с проходом в предыдущем выборе. Но выбор работает только при «первой загрузке», если я изменяю выбор, поэтому получаю ошибку поведения. (это отменяет выбор родителя)

Мне нужен "свет".

Это ссылка проекта https://zimeonline.com.br

Я пытаюсь изменить объект vue data() в каждом ajax в моих компонентах.

<template>
    <div>
        <select @change = "category()" v-model = "selectedId" v-bind:key = "option[0].id"  v-for = "option in options" class = "browser-default custom-select">
          <option  v-bind:value = "op.id" v-bind:selected = "op.selected==1" v-bind:key = "op.id" v-for = "op in option">{{op.name}}</option>
        </select>
    </div>
</template>
<script>
    export default {
        name: "ProductFormCategory",
        data() {
            return {
                options: {},
                selectedId:''
            }
        },
        created() {
            let vm = this;
            vm.category();
        },
        methods: {
            async category() {
                let vm = this;
                await vm.$http.get('category/'+vm.selectedId).then(function (response) {
                    vm.options = response.data;
                }).catch(function () {
                });
               vm.$forceUpdate();
            },
        }
    }
</script>

<style scoped>
    .browser-default{
        margin-bottom: 10px !important;
    }
</style>

this URL list ALL FATHER categorys
https://api.zimeonline.com.br/api/category

this URL list ALL CHILDREN categorys
https://api.zimeonline.com.br/api/category/some_id(from father category)

exemple: https://api.zimeonline.com.br/api/category/5

Then 5 is ID from  https://api.zimeonline.com.br/api/category

здесь пример реального выбора кода https://zimeonline.com.br (немного медленно в первый раз)