How to display a multilevel category and subcategory in Vue Component

Question

I am trying to display categories and subcategories in Vue component in mine laravel project. I followed this blog https://91techsquare.com/how-to-create-multilevel-category-and-subcategory-in-laravel/ to create multilevel category and subcategory in laravel. What I want to achieve is to convert the laravel blade display to vue component display.

Here is the blade part that I want to convert into vue component category in blade view

@if($categories)
    @foreach($categories as $category)
        <?php $dash=''; ?>
        <option value="{{$category->id}}">{{$category->name}}</option>
        @if(count($category->subcategory))
            @include('admin.categories.subCategoryList-option',['subcategories' => $category->subcategory])
        @endif
    @endforeach
@endif



                  

Inside admin.categories.subCategoryList-option

 <?php $dash.='-- '; ?>
@foreach($subcategories as $subcategory)
    <option value="{{$subcategory->id}}">{{$dash}}{{$subcategory->name}}</option>
    @if(count($subcategory->subcategory))
        @include('subCategoryList-option',['subcategories' => $subcategory->subcategory])
    @endif
@endforeach

Till far I have achieve this in vue file (Add.vue) Category view in mine Vue component

 <select type="text" v-model="category.parent_id" class="form-control">
    <option value="" selected="selected">None</option>
    <option v-if="categories.length > 0"
                v-for="(category,key) in categories" :key="key"
                v-bind:value="category.id"
                >{{ category.name }}</option>
</select>

Answer 1

I believe this is what you are after.

In vue if you need to have an empty element you can re use <template> as we have done here so we can nest the sub categories.

<template>
    <select v-model="someValue">
        <template v-for="category in categories">
            <option :value="category.id" :key="category.id">{{ category.name }}</option>
            <option v-if="category.subcategory" v-for="subcategory in category.subcategory" :value="subcategory.id" :key="subcategory.id">-- {{ subcategory.name }}</option>
        </template>
    </select>
</template>