vue写三级联动

<template>
     <p> 所在地：<select v-model="sheng" @change="shengindex()">
                    <option v-for="(item,index) in citys" :value="index" :key="index">{{item.name}}</option>
                </select>
                <select v-model="shi">
                    <option v-for="(item,index) in citys[sheng].city" :value="index" :key="index">{{item.name}}</option>
                </select>
                <select v-model="zhen">
                    <option v-for="(val,inds) in citys[sheng].city[shi].area" :value="inds"  :key="inds">{{val}}</option>
                </select>
            </p>
</template>
<script>
import citys from "../../public/doms"
export default {
    data() {
        return {
            citys:citys,
            sheng: "0",
            shi: "0",
            zhen: "0",
        }
    },
}
</script>