vue3中reactive数据被重新赋值后无法双向绑定的解决

import {reactive, toRefs} from 'vue'
setup(props, context) {
	const state = reactive({
	            myMessage:'',
	            myDialog: '',
	            myForm: ref(''),
	            searchValue: ref(''),
	            searchType: ref(''),
	            checked: ref(false),
	            actIndex: reactive({ arr: [0] }),
	            dialogTableVisible2: ref(false),
	            dialogTableVisible3: ref(false)
	}）
	return {
	            ...toRefs(state),
	}
}

<script setup>
import Header from '../home/Header.vue'
import Footer from '../home/Footer.vue'
</script>

<template>
    <Header></Header>
    <Footer></Footer>
</template>

//HTML结构
<div class="lx-content">
          <div
            class="lx-img"
            v-for="(item, i) in lxImges.value"
            :key="i"
          >
                <img :src="item.img" alt="" />
          </div>
</div>

<script setup>
import fetch from "../../fetch.js";
import { ref, reactive, onMounted } from "vue";
//如果说需要用ref定义一个变量，如下：
//let data = ref('')
let lxImges = reactive({ value: [],}//重点！！！！
fetch("abcd", {
  method: "get",
}).then((res) => {
  //console.log(res);
  lxImges.value = res.data;//重点！！！！
});
</script>