This next mistake is near and dear to my heart, because quite honestly, I've seen it in a number of different PRs that I've personally reviewed, and there's really not a great reason for it. So what's the offense? js application, and then they suddenly jump to using plain old vanilla JavaScript DOM manipulation. And worst of all, it's for no good reason at all.
This is eventually going to cause unexpected issues with what's displayed on your page, since now you're keeping up with state both in the DOM as well as in your component data. So how do we fix this? Well, the solution is simple. Instead, you should be using Vue in the intended manner.
You should define your data within script setup and then display it in your template via Vue's built-in directives or with the mustache syntax. Granted, the instances when you run into this in the wild are certainly not as gross of an offense as we just saw here on the screen. Sometimes they're hidden inside of event handlers that seem a little bit cleaner or another seemingly good reason for this direct down manipulation. But usually if it's about text or data that is being displayed on the page, there's really no good reason to do the direct manipulation.
Finally, on the rare occasion where you actually do need direct access to the DOM, please don't use vanilla query selectors. That's what Vue created template refs for. If you need more information on how template refs work, I've left a link in the description below.