[vue]一个组件挂载多次，数据相互影响问题！

Question

同一个组件挂载多次后数据会串。
因为怀疑是在组件注入state造成问题，我把state数据通过props传入问题还是存在：<RatePanel v-bind="..." />

下面是问题组件的大概情况

// 页面
<div v-for="item in boxList" :key="item.id">
    <RatePanel v-bind="item" />
</div>

// RatePanel 组件
<SpotBox
    v-if="productType === 'SPOT'"
    :key="id"
    v-bind="$props"
    v-on="$listeners"
/>
<FwdBox
    v-if="productType === 'FWD'"
    :key="id"
    v-bind="$props"
    v-on="$listeners"
/>

export default {
    name: 'RatePanel',
    props: {
        id: String,
        productType: String
    }
}

// SpotBox、FwdBox 组件
<a-row v-for="(item, index) in pricelist" :key="index">
    {{ item.price }}
</a-row>

export default {
    name: 'SpotBox', //name: 'FwdBox',
    props: {
        id: String,
    },
    computed: {
        ...mapState('spotModule', [
            'spotMessage',
        ]),
    },
    watch: {
        'spotMessage': {
            handler(message) {
                if (message.panelId === this.id) {
                    this.pricelist = message//一些筛选....
                }
            }
        }
    }
}

组件bug展示：

（左边的正确数字应该位30.xxxx，右边正确数字应该为1.xxxx）

Answer 1

</template>
    // 问题出在这，这里声明的变量在组件挂载多次的时候是共享的！！！！！
    const tenorKeyMap = new Map();
<script>
    export default {
        watch: {
            ...
            tenorKeyMap.set(KEY, DATA)
            ...
        }
    }