信件等级组件响应式缓存bug修复

src/components/MailLevel.vue

@@ -4,7 +4,10 @@
         <span>{{ item.name }}</span>
     </div>
 </template>
+
 <script setup>
+import { ref, watch, computed } from 'vue';
+
 const props = defineProps({
     value: {
         type: String,
@@ -12,29 +15,34 @@ const props = defineProps({
     },
     list: {
         type: Array,
-        default: [],
+        default: () => [],
     },
 });
 
 const item = ref({});
 
-if (props.value && props.list.length) {
+const findItem = () => {
-    item.value = props.list.find((item) => item.value === props.value);
+    return props.list.find((i) => i.value === props.value) || {};
-}
+};
+
+item.value = findItem();
+
+watch(() => props.value, (newVal) => {
+    item.value = findItem();
+});
 
-watch(
+watch(() => props.list, (newList, oldList) => {
-    () => props.value,
+    if (!newList.includes(item.value)) {
-    (val) => {
+        item.value = findItem();
-        if (props.value && props.list.length) {
-            item.value = props.list.find((item) => item.value === props.value);
-        }
     }
-);
+}, { deep: true });
 </script>
+
 <style lang="scss" scoped>
 .dot {
     position: relative;
     padding-left: 20px;
+
     &::before {
         display: block;
         content: "";
@@ -48,10 +56,12 @@ watch(
         top: 50%;
         transform: translateY(-50%);
     }
+
     &[type="danger"]::before {
         background-color: #ff0000;
         border-color: #ffbfbf;
     }
+
     &[type="warning"]::before {
         background-color: #ffa732;
         border-color: #ffda2c;