v-model不让for重新渲染。

问题遇到的现象和发生背景

v-model和v-for一起使用会产生for重新执行。当v-model的值发送改变时，for也就跟着重新渲染重新循环。
下面图片是个人项目中的案例，当我点开了子节点。选中的选项此时触发了v-model。for也跟着重新渲染。那么我点开了的节点又重新回来了没被点开的状态。

用代码块功能插入代码，请勿粘贴截图

img


以下代码可看下。searchValue可以体现for真的在重新渲染。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="app">
 <input id="RecipeName" type="text" class="form-control" placeholder="程序名称" v-model="searchValue" autocomplete="off" style="width: 150px;">
 <input id="RecipeName" type="text" class="form-control" placeholder="程序名称" v-model="add" autocomplete="off" style="width: 150px;">
  <ol>
    <li v-for="site in sites">
      {{ searchValue++ }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
  add:1,
  searchValue:1,
      sites: [
        { text: 'Google' }
      ]
    }
  },
     watch : {
     searchValue:function(val) {
         this.searchValue=val;
          }
     }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>
我想要达到的结果

求解，怎么解决这个v-model不让for重新渲染。

列表不想变化，可以
this.sites = Object.freeze(this.sites)