после изменения заголовка vuejs html путем вызова этого. $ refs, vuejs не обновляет этот элемент html впоследствии

Question

У меня есть простой html код:

<script src="vue.js"></script>
<div id="app1">
  <h1 ref="heading">{{ title }}</h1>
  <button v-on:click="change" ref="myButton">Change Title</button>  
</div>
<script src="app.js"></script>

, и это приложение. js

let v1=new Vue({
  el: '#app1',
  data: {
    title: 'The VueJS Instance'    
  },
  methods: {
    change: function() {      
      this.title ='The VueJS Instance (Updated)';      
    }
  },
  watch: {
    title: function(value) {
      alert('Title changed, new value: ' + value);
    }
  }
});

v1.$refs.heading.innerText="BEFORE Change";

Как вы видите, я устанавливаю внутренний текст для "заголовка h1" элемент. После этого я нажимаю на кнопку, которая вызовет метод change, после этого вызова открывается новое диалоговое окно с надписью «Заголовок изменен, новое значение: VueJS Экземпляр (обновлен)», но страница (заголовок h1) не обновила его до сих пор остается тем же «ДО изменения», что не так в моем коде, я думаю, что он должен обновить заголовок (я использую Vue. js v2.6.11 версия). Спасибо

Answer 1

Вам следует никогда обновлять DOM шаблона Vue напрямую - в противном случае синхронизация между виртуальным DOM и реальным DOM будет потеряна, и вы получите всевозможные странные ошибки или неловкое поведение.

Никто не может спасти вас от выстрела в себя. Удалите последнее утверждение в вашем коде, и вы увидите, что заголовок обновлен правильно.