我试图从click event文件中选择消息，因为click event引发了什么。我的问题是，当我第一次点击来自list的消息时，它没有选择任何东西（或者在我看来）。如果我第二次点击，选中的消息是其中的两个（当然是重复的）等等。
我知道问题可能出在哪里：

import SelectedItem from "../Interfaces/SelectedItem";

const selectedMessage = ref<MessageInterface | null>(null);

const selectMessage = (message: any) => {
  selectedMessage.value = message;
  SelectedItem(selectedMessage); 
};

SelectedItem模块看起来像这样：

import { watch, Ref } from "vue";

export default function SelectedItem<Type>(selectedValue: Ref<Type>): Type {
  watch(selectedValue, (newVal) => {
    chooseItem(newVal);
  });

  function chooseItem(item: Type) {
    if (item) {
      selectedValue.value = item;
      console.log(selectedValue.value);
    }
  }

  return selectedValue.value; 
}

之所以将SelectedItem函数分开，是因为我在多个文件中使用相同的逻辑和代码，所以不想重复。
这里：

<template>
<div>
  <select v-model="selectedMessage">
    <option value="">Vyberte cílové číslo</option>
    <option
      v-for="(message, index) in SMSMessages"
      :key="index"
      :value="message.targetNumber"
    >
      {{ message.targetNumber }}
    </option>
  </select>
  <p>Vybráno: {{ selectedMessage }}</p>
</div>
</template>

<script setup lang="ts">
import SMSMessages from "../data/sms-messages.json";
import { ref } from "vue";
import SelectedItem from '../Interfaces/SelectedItem'
const selectedMessage = ref<string>("");

selectedMessage.value = SelectedItem(selectedMessage);
</script>

完整代码：

<template>
  <div>
    <ul>
      <li
        v-for="(message, index) in SMSMessages"
        :key="index"
        @click="selectMessage(message)"
      >
        <p>Body: {{ message.body }}</p>
        <p>Origin Number: {{ message.originNumber }}</p>
        <p>Target Number: {{ message.targetNumber }}</p>
        <p>Direction: {{ message.direction }}</p>
        <p>Message Date: {{ message.messageDt }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import SMSMessages from "../data/sms-messages.json";
import MessageInterface from "../Interfaces/MessageInterface";
import { ref } from "vue";
import SelectedItem from "../Interfaces/SelectedItem";

const selectedMessage = ref<MessageInterface | null>(null);

const selectMessage = (message: any) => {
  selectedMessage.value = message;
  SelectedItem(selectedMessage); 
};
</script>