vue3 使用reactive产生的问题

先说下大体的代码情况。

1、首先在父组件——index.vue，里面有两个组件，一个是 P.vue， 一个是 C.vue。定义了一个变量：searchParams（使用reactive定义）。大体结构如下：

<template>
    <P v-model:searchParams="searchParams">
    </P>
    <C :searchParams="searchParams">
    </C>
</template>

<script setup lang="ts">
  const searchParams = reactive({
    keyword: '',
    storageCode: '',
    proCode: '',
    category: '',
  });
</script>

2、P.vue,关键代码如下：

const props = defineProps({
   searchParams: {
      type: null,
      default: () => ({}),
   }
});

  const emit = defineEmits(['update:searchParams']);

  const changeData = () => {

　　　const newSearchParams = {

     　　....

     }

  　　emit('update:searchParams', newSearchParams);

  }

3、C.vue代码只是使用这个searchParams，就不展示代码了

4、问题：本地调试，C.vue可以实时获取searchParams，但发到test、产线环境之后，就无法获取。

5、解决：最后把reactive改成ref，可以成功。但是原理还是不是很清楚，烦了官网，文档，这一段不知道是不是原因。但仍然无法解释为什么本地可以，线上就不行。