我有一个列出一堆可点击标签的 Vue 组件。当您单击一个标签时，它会将您带到另一个页面，其中包含包含该标签的对象列表。
组件代码的相关部分是：
<template>
<div>
<h2>All Tags</h2>
<TagList v-bind:tags="tags"/>
</div>
</template>
...
<script>
import TagList from './TagList'
export default {
name: 'AllTags',
components: {
TagList
},
data () {
return {
tags: []
}
},
mounted () {
tags = // array loaded from a database
}
}
</script>
当我最初查看页面时，这一切都很好。但是，如果我从这个列表中浏览，例如通过单击单个标签，然后再浏览回来，我只会看到<h2>All Tags</h2>标题。在浏览器中使用 Vue 调试器，可以看到数据还在。
我<router-view :key="$route.fullPath">用来控制整个应用程序并怀疑问题出在密钥上。
有人可以在这里指出我正确的方向吗？TagList每次访问应用程序的该页面时，如何让组件呈现？
编辑：这是TagList组件的代码：
<template>
<div class="tags">
<Tag v-for="tag in tags" v-bind:tag="tag" v-bind:key="tag" />
</div>
</template>
<script>
import Tag from './Tag'
export default {
name: 'TagList',
props: ['tags'],
components: {
Tag
}
}
</script>