Vue组件复用后Datalist选项显示异常问题求助

我是Vue及Web开发新手，正在做一个徒步装备清单的学校项目。创建了PackItem组件，包含品牌、型号、重量输入框，后端数据库存储可选装备数据，预期逻辑：选择品牌后型号框显示对应型号列表，选型号后自动填充重量。

组件模板代码 #

<template>
    <div class="inputRow">

        <h1> Brand: {{ brand }}</h1>
        <input
            type="text" 
            list="brands" 
            placeholder="Brand"
            v-model="brand"
        />
        <datalist id="brands">
            <option 
                v-for="(suggested_brand, index) in getProductBrands" 
                :key="index" 
                :value="suggested_brand"/>
        </datalist> 

        <input
            type="text" 
            list="models" 
            v-model="model"
        />
        <datalist id="models"> 
            <option 
                v-for="(suggested_model, index) in brandModels" 
                :key="index" 
                :value="suggested_model"/>
         </datalist>

        <input 
            class="product-inputs"
            type="number" 
            name="Weight" 
            placeholder="Weight" 
            v-model="getProductWeight"
        @change="updateItemOnStore($event.target.value);"/> 
    </div>
</template>

最初的组件脚本（依赖Vuex） #

export default defineComponent({
    name: 'PackItem',

    props: {
    },

    data() {
        return {
            model: '',
            brand: '',
            weight: 0,
        }
    },
     
    // 省略其他代码

    computed: {
        getProductBrands(){
            return this.$store.getters.productsBrandList 
        },

        getProductWeight(){
            let weight = this.$store.getters.productWeight(this.brand, this.model)
            return weight
        },

        brandModels(){
            if(this.brand === ''){
                return []
            }
            console.debug('Item %d getting models for %s', this.uuid, this.brand)
            let models = this.$store.getters.brandModels(this.brand)
            return models
        },
    },
})

问题现象 #

第一个PackItem组件运行正常，但父组件生成第二个组件后，无论选择哪个品牌，新组件的型号列表都和第一个组件一致。日志显示已获取到对应品牌的正确型号数据，但页面datalist未显示正确选项；将brandModels改为方法并存储到本地数据后，数据依然正确，但页面仍无变化。

编辑更新：改用本地数据处理的计算属性 #

将全量产品数据拉取到组件内，改用本地计算属性处理，问题仍未解决，日志显示brandModels生成的型号列表正确，但datalist仍显示错误选项。对应计算属性代码：

computed: {
    getProductBrands(){
        let brands = []
        this.dbProducts.forEach(product => {
            var brand = product.brand;
            if(!brands.includes(brand)){
                console.debug('Adding brand %s to brands list', brand)
                brands.push(brand)
            }
        } )
        console.log('Brands list: %s', brands)
        return brands
    },

    brandModels(){
        if(this.brand === '') {return }
        let models = []
        this.dbProducts.filter(
            product => product.brand === this.brand)
            .forEach(product => models.push(product.model)
            )
        console.debug('%s models: %s', this.brand, models)
        return models
    },

    getProductWeight(){
        if(this.brand === '' || this.model === ''){ return } 
        let product = this.dbProducts.find(
            product => (
                product.brand === this.brand && product.model == this.model
            ))
        if(product){
            let weight = product.weightGrams
            console.debug('Got weight %dg for product %s %s', weight, this.brand, this.model)
            return weight
        }

        console.debug('Did not find weight for product %s %s in database!', this.brand, this.model)
        return 0
    },

},

内容的提问来源于stack exchange，提问作者kruml