Vue.js 那么，如何使用VueJS在动态更改的属性上更新或重新呈现html模板呢？

我有一个VueJS模板，其中包含Bootstrap 4模式对话框：

<script type="text/x-template" id="vue-case-select">

 <div class="modal fade" id="case-select" tabindex="-1" role="dialog" aria-labelledby="caseLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document" ref="container">
    <div class="modal-content">
      <div class="modal-header"> ... </div>
      <div class="modal-body">
       <div class="modal-container">

        <!-- This property must be reactive and re-rendered -->
        <input type="text" class="form-control" v-model="title">

       </div>
      </div>
    </div>
  </div>
 </div>

</script>

一切都是静态的。但我想根据用户选择的父组件更改对话框中输入[type=text]的值。我试着这样做：

// This code is executed in a method of another VueJS component which has
// its own title

const MyCase = Vue.extend(VueCaseSelect);
const vm = new MyCase({
    parent: this,
    propsData: {
        // Passing title to modal dialog and it works
        predefined_title: this.title,
    },
});

vm.$mount('#some-element-id');

我确信，每次创建新的MyCase对象时，在vue case select组件内装入的事件上，属性标题都会正确更改。但我不知道如何使input[type=text]控件根据v-model更新其值

那么，如何使用VueJS在动态更改的属性上更新或重新呈现html模板呢

我试过计算机、手表和$nextTick，但可能是我做得不对吗

---

UPD：可能需要指出的是，该代码只工作一次。这是我第一次看到显示标题的对话框，但当我关闭它并单击另一个组件时，VueJS中的title变量处于正确状态，但输入[type=text]仍然包含以前的title值。

是否尝试使用watcher？像这个

watch: {
   predefined_title(val) {
      this.title = val
   }
}

或者，在输入中添加一个条件，以防止在预定义的标题为空时显示它

<input type="text" class="form-control" v-model="title" v-if="predefined_title">

---

watch不会对属性更改做出反应，但会在标题更改时触发。无论如何，这没有帮助：如何触发对话框？$'case-select'.model；在MyCase componentIn watch中分配所有字段后，您是否看到标题的值正在更新？是的，标题在每次应该更新时都会更新，并且我可以在watcher中看到它，但是输入值对于第一个标题只更新一次，并保留其值，直到重新加载页面。

<input type="text" class="form-control" v-model="title" v-if="predefined_title">

beforeDestroy () {
    this.$el.parentNode.removeChild(this.$el);
    $('.modal-backdrop').hide();
},