I use this approach too but it fails whenever there's any state in the elements. An example is input elements:

  function update() {
    let value =   document.querySelector("input")?.valueAsNumber;
    document.querySelector("main").innerHTML = `
    Enter a price: <input type="number" oninput="update()"> 
    <br>
    Discounted price is ${value * 0.8}
    `;
  }
  update();

What will happen is each time you enter a character, it will create a new input element, which loses the focus and cursor position.

To solve this we can split it up so that the inputs are created once and the output is updated with innerHTML. No problem, right? But it's hard to scale up because now you have to split the html up into small segments based on whether there's internal state or not. If you want to update the 'max' of an input type=range, you aren't doing it with handlebars anymore but you have to use setAttribute instead.

What react, vue, etc. do for you is handle the updates in a way that reuses the existing elements. If you changed any attributes of the <input type=number>, it will not lose the focus and cursor and any other state. If you change the max of an <input type=range>, it will update the existing element (using setAttribute) without losing any other state. If you change some text, it will update the existing text node using innerText/textContent.

You may not need this type of system. I think React, Vue, etc. are overused. But in some projects it's much cleaner to use a React/Vue/etc. style system rather than splitting it up where some segments use setAttribute, some use innerHtml, etc.