JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <select v-model="input.folder" id="pid">
                                    <option :value="null">請選擇</option>
                                    <option v-for="(item, j) in parentList.sort"
                                            :key="j">
                                        {{ item }}
                                    </option>
                                </select>
  <select v-model="input.scan" >
                                    <option :value="null">請選擇</option>
                                    <option v-for="(item, j) in childrenList.sort"
                                            :key="j">
                                        {{ item }}
                                    </option>
                                </select>   
   <select v-model="input.host" @change="Submit">
                                    <option :value="null">請選擇</option>
                                    <option v-for="(item, j) in grandsonList.sort"
                                            :key="j">
                                        {{ item }}
                                    </option>
                                </select>                               
                                
</div>

JavaScript

const folderdata1 = [
            { folderid: 27, foldername: 'A', scanid: 28, scanName: 'apple' ,hostid:1,hostname:'applepie'},
            { folderid: 4588, foldername: 'B', scanid: 4732, scanName: 'Black', hostid:2,hostname:'BlackCoffee'},
            { folderid: 4588, foldername: 'B', scanid: 4732, scanName: 'Black', hostid:8,hostname:'BlackMan'},
            { folderid: 4588, foldername: 'B', scanid: 4665, scanName: 'Blue' , hostid:3,hostname:'BlueBird'},
          	{ folderid: 4588, foldername: 'B', scanid: 4665, scanName: 'Blue' , hostid:4,hostname:'BlueSky'},
            { folderid: 4588, foldername: 'B', scanid: 4665, scanName: 'Blue' , hostid:5,hostname:'BlueTears'},
        ]

new Vue({
            el: '#app',
            data() {
                return {
                  
                    host: [],
                    input: {
                        folder: null,
                        scan: null,
                        host:null,
                    },
                    folders: [],

                }
            },
            created() {
                this.folders = folderdata1 //之後要接的選單資料
            },
            computed: {
                parentList() {
                    let obj = {
                        sort: [],
                        map: {}
                    }
                    this.folders.forEach(({ folderid, foldername, scanid, scanName,hostid,hostname }, index) => {
                        if (!obj.map[foldername]) {
                            obj.sort.push(foldername)
                            // mapObj建立一個foldername 的屬性，值是 sort,map
                            obj.map[foldername] = {
                                sort: [],
                                map: {},
                            }
                        }
                        if(!obj.map[foldername].map[scanName]){
                        	obj.map[foldername].sort.push(scanName)
                        	obj.map[foldername].map[scanName] = {...