vue下拉框多选问题

<template>
  <div class="hello">
    <el-select v-model="value" multiple filterable placeholder="请选择" :filter-method="myFilter">
      <el-option
        v-for="item in tempOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  watch: {
    value:{
      handler (n) {
        console.log('value', n)
        if(n.length===0){
          this.tempOptions = this.options
        }
      }
    }
  },
  data () {
    return {
      options: [{
          value: 'bj1',
          label: '北京1'
        }, {
          value: 'bj2',
          label: '北京2'
        }, {
          value: 'bj3',
          label: '北京3'
        }, {
          value: 'bj4',
          label: '北京4'
        }, {
          value: 'bj5',
          label: '北京5'
        },{
          value: 'sh1',
          label: '上海1'
        }, {
          value: 'sh2',
          label: '上海2'
        }, {
          value: 'sh3',
          label: '上海3'
        }, {
          value: 'sh4',
          label: '上海4'
        }, {
          value: 'sh5',
          label: '上海5'
        }],
        tempOptions: [],
        value: '',
        tempValue: ''
    }
  },
  mounted() {
    this.tempOptions = this.options
  },
  methods: {
    myFilter(val) {
      this.tempValue = val ? val : this.tempValue
      this.tempOptions = this.options.filter(item => {
        return item.label.indexOf(this.tempValue) > -1
      })
      console.log('filter',val)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>