Vue.js 在CompositionAPI中使用道具时，组件保持可见

我有一个显示产品信息的vue 3应用程序。“主页”组件显示所有可用的产品。每一个都有一个按钮，它将我带到一个组件，该组件显示有关所述产品的信息，称为Single Box。它从route参数获取产品ID，然后通过graphql获取附加信息。看起来是这样的：

从“@vue/apollo composable”导入{useQuery，useResult}；
从“vue路由器”导入{useRoute}
从“../graphql/singleBox.query.gql”导入singleBox查询
从“../components/BoxDisplay”导入BoxDisplay
导出默认值{
组成部分：{
盒式显示器
},
设置（）{
const route=useRoute（）；
const boxId=route.params.id
const{result}=useQuery（singleBoxQuery，{id:boxId}）
const box=useResult（结果，null）
返回{
boxId，
箱
}
}
}

然后，BoxDisplay组件用于显示当前框的信息。本页稍后将有更多内容，因此需要BoxDisplay。看起来是这样的：

{{box.Name}
导出默认值{
道具：{
框：{}
},
设置（道具）{
const myhtml=“hello”+props.box.Name
返回{
myhtml
}
}
}

现在的问题是，只要我在setup（）中使用道具，当我在浏览器中单击back时，组件就会保持可见。在我刷新页面之前，它一直在那里。我做错了什么

Use ref and computed

```
从“vue”导入{ref，computed}
```
const myhtml=computed（（）=>hello'+props.box.Name）
或
const myhtml=ref（'hello'+props.box.Name）

```

import { ref, computed } from 'vue'
```

const myhtml = computed(() => '<h1>hello</h1>' + props.box.Name)

or

const myhtml = ref('<h1>hello</h1>' + props.box.Name)