Установите значение для тега <li> и обновите реквизит: нажмите $event vue.js

Я пытаюсь обновить дочерние реквизиты до родительских с помощью on:click $event.

Я передал данные и $event от родителя к дочернему, как показано ниже. в родительском;

<v-filter
    :sortTypePrice = "sortTypePrice"
    :sortTypeNewest = "sortTypeNewest"
    v-on:updatePrice = "sortTypePrice = $event"
    v-on:updateDate = "sortTypeNewest = $event"
/>


data(){
    return {
        sortTypePrice: "",
        sortTypeNewest: "",
    }
 }

computed: {
  filterArticles(){

      let filteredStates = this.api.filter((article) => {
          return (this.keyword.length === 0 || article.address.includes(this.keyword)) 
      });

      if (this.sortTypePrice == "price") {
          filteredStates = filteredStates.sort((prev, curr) => prev.price1 - curr.price1);
      }
      if (this.sortTypeNewest == 'created_at') {
          filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
      }

      return filteredStates;
  },
}

Я получил реквизит и установил обновление $event. Но мой @click не работает.

у ребенка

<ul>
  <li v-model = "sortPrice" @click = "updatePrice" :value = "price">lowest</li>
  <li v-model = "sortDate" @click = "updateDate" :value = "created_at">newest</li>
</ul>


props:["sortTypePrice", "sortTypeNewest"],
name: "controller",
data(){
    return {
        price: "price",
        created_at: "created_at",
        sortPrice:this.sortTypePrice,
        sortDate:this.sortTypeNewest,
    };
},
methods: {
    updatePrice(e){
        this.$emit("updatePrice", e.target.value)
    },
    updateDate(e){
        this.$emit("updateDate", e.target.value)
    }
}

Я думаю, что я использую очень неправильный способ сделать это. если это так, каков правильный способ добиться этого?