Vue

HTML

<div id="app">
  <select @change="changeSelect">
    <option>Listar todos</option>
    <option v-for="item in items">{{ item.name }}</option>
 </select>
  <select>
    <option>Listar todos</option>
    <option v-for="item in secondSelectItems">{{ item.name }}</option>
 </select>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
   data: {
     search: '',
     items: [
       {name: 'Stackoverflow', type: 'development', year: '2005'},
       {name: 'Game of Thrones', type: 'serie', year: '2005'},
       {name: 'Jon lim', type: 'actor', year: '2012'}
     ],
     items2: [
       {name: 'Stackoverflow', type: 'development', year: '2005'},
       {name: 'Game of Thrones', type: 'serie', year: '2005'},
       {name: 'Jon lim', type: 'actor', year: '2012'}
     ],
     currentYear: null,
  },
  computed: {
  secondSelectItems() {
    return this.items2.filter((item)=> item.year === this.currentYear)
    }
	},
  methods: {
  	changeSelect: function(e){
     this.currentYear = this.items[e.target.selectedIndex -1].year;
    }
  }
})