效果如下：

默认选择是计算机学院软件工程，当把第一个下拉框选项改为通信与信息工程学院时
，后边的下拉框选项变化，比如第一项变成了通信工程
注： 使用了elemenui，若不需要，可以改成将标签改为普通HTML标签

实现过程：

1. select部分：用v-for加载选项列表，选择的选项改变时使用v-on:change定义一个方法跟踪选择值的变化

 <select v-on:change="indexSelectCollege($event)">
            <option v-for="(option1, index1) in college" :value="option1.text" :key="index1">{{option1.text}}</option>
          </select>
          <select v-on:change="indexSelectProfession($event)">
            <option v-for="(option2, index2) in professionList" :value="option2.text" :key="index2">{{option2.text}}</option>

2. method部分：默认选择设置字段 activeCollege和 activeProfession，设置初值后，每次选择改变时，改变他们的值（ activeCollege和 activeProfession是当前选择的学院以及专业）

methods: {
    indexSelectCollege (event) {
      this.joinForm.activeCollege = event.target.value
      console.log(this.joinForm.activeCollege)
    },
    indexSelectProfession (event) {
      this.joinForm.activeProfession = event.target.value
      console.log(this.joinForm.activeProfession)
    }
  }

3. watch部分，监视data中 activeCollege的变化情况， activeCollege变化时，遍历college数组，找出对应的profession数组，更新professionList数组

 watch: {
    'joinForm.activeCollege': function () {
      for (var i = 0; i < this.college.length; i++) {
        if (this.college[i].text === this.joinForm.activeCollege) {
          // console.log(this.college[i].profession)
          this.professionList = this.college[i].profession // professionList保存当前学院对应的专业们
        }
      }
    },
    deep: true
  }

部分代码：

// join.vue
<template>
<div class='main'>
    <el-form :model="joinForm" ref="joinForm">
      <el-form-item class="input-container select">
        <div style="margin-bottom: -20px;">
          <select v-on:change="indexSelectCollege($event)">
            <option v-for="(option1, index1) in college" :value="option1.text" :key="index1">{{option1.text}}</option>
          </select>
          <select v-on:change="indexSelectProfession($event)">
            <option v-for="(option2, index2) in professionList" :value="option2.text" :key="index2">{{option2.text}}</option>
          </select>
        </div>
      </el-form-item>
    </el-form>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import '组件名称' from '组件路径';
import { professionList, college } from '../../assets/js/join.js' // 外部导入

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      joinForm: {
        activeCollege: '计算机学院',
        activeProfession: '软件工程'
      },
      college,
      professionList
      // professionList: [
      //   { text: '软件工程' },
      //   { text: '计算机科学与技术' },
      //   { text: '网络工程' },
      //   { text: '大数据' }
      // ],
      // college: [
      //   { text: '计算机学院',
      //     profession: [
      //       { text: '软件工程' },
      //       { text: '计算机科学与技术' },
      //       { text: '网络工程' },
      //       { text: '大数据' }
      //     ]
      //   },
      //   { text: '通信与信息工程学院',
      //     profession: [
      //       { text: '通信工程' },
      //       { text: '信息工程' },
      //       { text: '电子信息科学与技术' },
      //       { text: '广播电视工程' },
      //       { text: '物联网工程' },
      //       { text: '电信工程' }
      //     ]
      //   }
      // ]
    }
  },
  // 监听属性 类似于data概念
  computed: {
  },
  // 监控data中的数据变化
  watch: {
    'joinForm.activeCollege': function () {
      for (var i = 0; i < this.college.length; i++) {
        if (this.college[i].text === this.joinForm.activeCollege) {
          // console.log(this.college[i].profession)
          this.professionList = this.college[i].profession
        }
      }
    },
    deep: true
  },
  // 过滤器
  filters: {},
  // 方法集合
  methods: {
    indexSelectCollege (event) {
      this.joinForm.activeCollege = event.target.value
      console.log(this.joinForm.activeCollege)
    },
    indexSelectProfession (event) {
      this.joinForm.activeProfession = event.target.value
      console.log(this.joinForm.activeProfession)
    }
  }
}
</script>
<style scoped>
select {
  appearance: none;
  background:url('../../assets/img/down.png') no-repeat right center; // 改变下拉图白哦样式
  padding-right: 30px;
  white-space: nowrap;
  border: none;
  outline: none;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #212121;
  font-size: 20px;
  font-weight: 300;
  line-height: 50px;
}
.select :nth-child(2) {
  margin-left: 20px;
}
option {
  border: 1px solid #757575;
  box-shadow: 0 0 5px #757575;
}
</style>

// join.js
module.exports = {
  'professionList': [
    { 'text': '软件工程' },
    { 'text': '计算机科学与技术' },
    { 'text': '网络工程' },
    { 'text': '大数据' }
  ],
  'college': [
    { 'text': '计算机学院',
      'profession': [
        { 'text': '软件工程' },
        { 'text': '计算机科学与技术' },
        { 'text': '网络工程' },
        { 'text': '大数据' }
      ]
    },
    { 'text': '通信与信息工程学院',
      'profession': [
        { 'text': '通信工程' },
        { 'text': '信息工程' },
        { 'text': '电子信息科学与技术' },
        { 'text': '广播电视工程' },
        { 'text': '物联网工程' },
        { 'text': '电信工程' }
      ]
    }

  ]
}