v-options保留相同的选项[VUE]

Question

我正在尝试使用Vue时实现选择框。

在我的模板中，我有以下代码段：

<div class="btn-group btn-group-justified">
    <v-select v-model="search">
        <v-option v-for="option in Options" :value="option">{{ option }}</v-option>
    </v-select>
</div>

导入：

 import { select, option } from 'vue-strap/dist/vue-strap';

这是一个通用组件，已在网络上的不同页面中使用（移动到其他路径不需要刷新页面）。

如果我在这些页面之间移动，它将保留旧选项。为了了解此问题，请考虑以下示例：

页面A具有以下选项列表：[dog,cat]

页面B具有以下选项列表：[bird,dog]

• 如果我打开A页，它将显示：[dog,cat]。

• 如果我将移至页面B，它将显示[dog,dog,cat,bird]。

• 如果我再次移至页面A，它将显示[dog,dog,cat,bird,dog,cat]。

每次options更改时，我都尝试在watch中初始化$route，但这没有帮助。

关于如何解决此问题的任何建议？