Javascript Vue回调更新数据，但第三方组件无法重新渲染

当<代码>条件更改时，应更新的值。当前，

watch

已成功更新

selectedDate

，但无法重新呈现

日期下拉列表

<template>
  <div id="app">
      <div>{{selectedDate}}</div> <-- this value is updated after getFilter()
      <date-dropdown default="1995-01-10" v-model="selectedDate"/> <-- this component holds old/default value: 1995-01-10
      <b-button @click="getFilter()" variant="primary">update</b-button>
  </div>
</template>

<script>
    import axios from 'axios';
    import DateDropdown from "vue-date-dropdown";
    const SERVER_URL = 'http://localhost:9000';
  const instance = axios.create({
      baseURL: SERVER_URL,
      timeout: 1000
  });

  export default {
    name: 'App',
    components: {
        DateDropdown
    },
    props: {
    },
    data () {
      return {
        selectedDate: '',
        filter: {
          name: 'Filter22With2Conditions',
          conditions: [
              { type: 'date', clause: 'until', data: '02.02.1990' },
          ]
        }
...
    watch: {
      filter: function () {
          this.selectedDate = this.filter.conditions[0].data;
      }
    },

    methods: {
        getFilter: function() {
            let self = this;
            instance.get('/api/filters?name=Filter22With2Conditions')
                .then(function(response) {
                    console.log('getFilter:response: ' + JSON.stringify(response.data))
                    self.filter = response.data;
                })
                .catch(function(error) {
                    console.log('getFilter: error: '  + error)
                    self.errors.push(error);
                })
        },
...
}

{{selectedDate}}这不是一个好的。任何不使用或不生成
日期
实例的日期选取器都不值得使用。利益相关者需要使用类似的3个下拉列表来选择日期。有什么好的选择吗？请阅读并查看组件的来源。。。如您所见，没有
值
prop