如何让html元素在新数据传入时进行更新？

document.getElementById("elementId").innerHTML = "新数据";

<div id="app">
  {{ data }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      data: '旧数据'
    },
    methods: {
      updateData: function() {
        this.data = '新数据';
      }
    }
  })
</script>

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    document.getElementById('elementId').innerText = data;
  })
  .catch(error => {
    console.error('Error:', error);
  });