Javascript Vue 3被动属性值未在模板中更新

我有一个具有被动属性的组件，当控制台日志中的vue路由更改时，该组件会更新。我可以看到被动值更改，但在模板中看不到。如何更新模板

代码

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item
      v-for="(route, index) in routes"
      :key="index"
      :to="{ path: route.path }"
    >
      {{ route.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import { useRoute } from 'vue-router';
import { reactive, watch } from '@vue/runtime-core';
export default {
  name: "BreadCrumbs",
  setup() {
    const route = useRoute();
    let routes = reactive(route.matched);

    watch(() => route.name, () => {
      routes = route.matched;
      console.log(routes);
    });

    return {
      routes
    };
  }
};
</script>

{{route.meta.title}
从“vue路由器”导入{useRoute}；
从'@vue/runtime-core'导入{reactive，watch}；
导出默认值{
名称：“面包屑”，
设置（）{
const route=useRoute（）；
let routes=反应式（route.matched）；
监视（（）=>route.name，（）=>{
routes=route.matched；
控制台日志（路由）；
});
返回{
路线
};
}
};

路由的目的是什么？是否

路由。匹配的
在模板中不起作用？