在v-for循环中的click事件之后，我遇到了data属性不更新的问题。vue组件如下所示：

<template>
<div v-if="showResults && placeholder === 'Country'" class="results-container">
            <ul>
                <li class="is-clickable" v-for="country in countries" :key="country.id" >{{country.name}}
                    <span class="is-pulled-right">

                    <img class="plus mr-2" src="/images/icons/plus.svg" />
                    <p @click="setChosen(country.id)" class="select-text">SELECT</p>
                  </span>
                </li>
            </ul>
        </div>
</template>

<script>
export default {
    name: "Searchbar",
    props: {
        placeholder: String,
    },
    data() {
        return {
            countries: null,
            showResults: false,
            chosenId:null,
            chosenName: null,
            searchInput:null,
        };
    },
    methods: {
        getCountries() {
            axios
                .get("/api/getCountries")
                .then((response) => {
                    this.countries = response.data.data;
                })
                .catch((error) => {
                    console.log("error");
                    console.log(error);
                });
        },
        setChosen(id){
          this.chosenId = id;
        }
    },
    mounted() {
        this.getCountries();
    },
};
</script>

`
我希望chosenId在点击时更新，但它实际上并没有更新，除非我更新dom，或者强制vue做出React。我做错了什么？我可以控制台日志的id完全好。