fix: avatar component cannot watch data updates (#4459)

#### What type of PR is this?
/kind bug
/area console
/kind improvement

#### What this PR does / why we need it:
当用户对头像进行删除或修改时，文章页面和用户页面的头像会出现显示错误。
#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4408
Fixes https://github.com/halo-dev/halo/issues/4352

#### Special notes for your reviewer:

#### Does this PR introduce a user-facing change?

```release-note
修复 Console 端头像组件的图片更新问题
```

console/packages/components/src/components/avatar/Avatar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { IconErrorWarning } from "../../icons/icons";
 import type { Size } from "./interface";
 
@@ -24,21 +24,9 @@ const props = withDefaults(
 
 const isLoading = ref(false);
 const error = ref(false);
+let init = true;
 
-const loadImage = async () => {
-  if (!props.src) {
-    return Promise.reject();
-  }
-
-  const image = new Image();
-  image.src = props.src;
-  return new Promise((resolve, reject) => {
-    image.onload = () => resolve(image);
-    image.onerror = (err) => reject(err);
-  });
-};
-
-onMounted(async () => {
+const loadImage = async (isInit: boolean) => {
   if (!props.src) {
     error.value = true;
     return;
@@ -46,12 +34,34 @@ onMounted(async () => {
 
   isLoading.value = true;
   try {
-    await loadImage();
+    if (!props.src) {
+      error.value = true;
+      return Promise.reject();
+    }
+    if (!isInit) {
+      error.value = false;
+    }
+    const image = new Image();
+    image.src = props.src;
+    return new Promise((resolve, reject) => {
+      image.onload = () => resolve(image);
+      image.onerror = (err) => {
+        error.value = true;
+        reject(err);
+      };
+    });
   } catch (e) {
     error.value = true;
   } finally {
     isLoading.value = false;
   }
+};
+
+watch([() => props.alt, () => props.src], async () => loadImage(init));
+
+onMounted(async () => {
+  loadImage(init);
+  init = false;
 });
 
 const classes = computed(() => {