After manipulating the DOM and re-rendering, the DOM is restored.

[seveny]

"vue": "3.2.47"
Here is the minimal example：
`

This is a test

{{ value1 }}

<script> export default { name: 'App', data() { return { value1: 1, } }, computed: { cStyle() { return { color: "blue" } } }, mounted() { setTimeout(() => { this.setColor(); this.setValue(2); }, 2 * 1000) }, methods: { setColor() { document.getElementById("ccc").style.color = "red"; }, setValue(val) { this.value1 = val; } } } </script>

`
Now I need to manipulate the DOM, and after updating the data, the component will re-render, causing the styles of the previously manipulated DOM to be overridden by the template. This used to work properly in Vue2.
The current problem is that there are a considerable amount of code that manipulates the DOM like this , and the business is not willing to make changes because it involves a large number of components. We also do not want to reflect all DOM manipulations in the template. Does anyone know any other ways to make the DOM manipulations effective? I'm eagerly looking forward to your replies. Thank you.

[seveny]

Here is the online example https://play.vuejs.org/#eNplkU1vgzAMhv+KlUthqij0yABpm3bYedVOuWTEW5GAIHDQKsR/XxI+t0o52LH9vP4Y2FPTBL1GFrOEsGpKQZjxGiCRRe+MyYRCppzlec4ZxB3dSrTuuzU4yy7XogPzBBB2lJy22mGAXpQaIxhHh51jyWmnZtwub4uGnI0/jWoJJH4JXRIMtqwWFcZwMM0ejtaXgoTnTzGAFkm39eLBrBhD5HIBnPLonFxVjSaU8ZI9zbCx7mm2qFRtDJx9Gi5nS8Bh/9ArpWsD32gd0qWoUGnyzGeabVQyKwtM+MWyPf/x//+HncE7L4HxCGd4gCgMQ3+nh3RVsluH2XibkFS5rrCm4BvptURrPt/epDdf0w/cNQM3I6RmyBYlZ6vsCp4aMqvdsV2z831Tu/alzLXIa/OS03paNv4CVCbBLA==

[sqal]

Have you looked at https://vuejs.org/api/built-in-directives.html#v-memo