طراحی لیستی شبیه به دسته بندی دیوار با vue و laravel

سلام دوستان
همین اول بگم قصدم یادگیریه و نه چیز دیگه من یک طرحی همینطوری برای خودم میزنم تا یک جاهایی شو خودم تونستم طراحی کنم
این لیست دسته بندی های دیوار هستش
دیوار

و این لیست من هستش
لست من

تقریبا مثل دیوار کار میکنه دسته بندی از کنترولر گرفته و در vue.js بر اساس parentid دسته بندی میکنه و هیچ مشکلی نداره
مشکلی اصلی اینکه من نمیدنم چطوری طراحی کنم وقتی شما دسته ها را انتخاب کردید id اونارو داخل یک ارایه ذخیره کنه و اونارو به صفحه ثبت آگهی(یک ویو فرم دیگه) و سمت کنترل بفرسته. تمام مایگریشن ها و جداول جوین درست و جداول دسته بندی و اگهی با هم در ارتباط هستند.
میخواستم بدونم درمورد این مسئله یکی میتونه کمکم کنه که چطوری طراحیش کنم

بازم میگم من واقعا برای یادگیری دارم این کارو انجام میدم و اینم کد من هستش :

<template>
    <div>
        <loading></loading>
        <ol class="parent">
            <li>
                <span v-show="typeof parent.name_category!=='undefined'"
                      style="cursor: pointer" @click="getChildren(parent.parent_id,child)">
                        <span v-show="parent.parent_id!==0">
                              بازگشت از دسته {{parent.name_category}}
                            <i class="fa fa-angle-right"></i>
                        </span>

                </span>
            </li>
        </ol>
        <ul class="m-4">
            <li id="liCat" class="liCategory" v-for="cat in category" @click="sendCategoryId(cat.id,child)"
                v-bind:key="cat.id">
                {{cat.name_category}}
                <i class="fa fa-angle-left "></i>

            </li>
        </ul>

    </div>
</template>
<script>
    export default {
        name: "newAdvert",
        data() {
            return {
                hold: [],
                parent: [],
                processing: true,
                category: [],
                child: [],
                cat: {
                    parent_id: '',
                    name_category: '',
                    id: '',
                },
            }
        },
        created() {
            this.show()
        },
        methods: {
            show() {
                axios.get('/show').then(res => {
                    let x = res.data;
                    this.child = res.data;
                    this.sendCategoryId(1, x)
                    this.findParent(1, x)
                }).catch(error => console.log(error));
            },
            sendCategoryId(id, categories) {
                let x = [];
                for (let i = 0; i < categories.length; i++) {
                    if (categories[i].parent_id === id) {
                        x = x.concat(categories[i]);

                    }
                }
                this.category = x;

                this.findParent(id, categories)

            },
            findParent(id, categories) {
                let parent = [];
                const length = categories.length;
                for (let i = 0; i < length; i++) {
                    if (categories[i].id === id) {
                        parent = categories[i];
                    }
                }
                this.parent = parent;
            },
            getChildren(id, categories) {
                let x = [];
                for (let i = 0; i < categories.length; i++) {
                    if (categories[i].parent_id === id) {
                        x = x.concat(categories[i]);

                    }
                }
                this.category = x;
                this.findParent(id, categories)
            },

        }
    }
</script>```