continua upgrade Vue 3

src/components/CMyAvatar/CMyAvatar.scss

@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}

src/components/CMyAvatar/CMyAvatar.ts

@@ -0,0 +1,62 @@
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+
+export default defineComponent({
+  name: 'CMyAvatar',
+  props: {
+    myimg: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: '40px',
+    },
+  },
+
+  setup(props) {
+
+    let myicon = ref('')
+    let myimgint = ref('')
+
+    const userStore = useUserStore()
+    const imgprofile = ref(userStore.my.profile.img)
+
+    function refresh() {
+      if (!props.myimg) {
+        myicon.value = 'fas fa-user-circle'
+      } else {
+        myimgint.value = props.myimg
+      }
+      // console.log('myimgint', this.myimgint)
+    }
+
+    watch(
+      imgprofile,
+      // @ts-ignore
+      (value: string, oldValue: string) => {
+        userStore.my.profile.img = value
+        refresh()
+      },
+    )
+
+
+    watch(
+      // @ts-ignore
+      props.myimg,
+      // @ts-ignore
+      (value: string, oldValue: string) => {
+        myimgint.value = ''
+        refresh()
+      },
+    )
+
+    onMounted(refresh)
+
+    return {
+      myimgint,
+    }
+  },
+})

src/components/CMyAvatar/CMyAvatar.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <q-avatar v-if="!myimgint" class="q-mb-sx center_img" :icon="myicon" :font-size="size">
+
+        </q-avatar>
+        <q-avatar v-if="myimgint" class="q-mb-sx center_img">
+            <img :src="myimgint" :font-size="size" alt="my avatar">
+        </q-avatar>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyAvatar.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyAvatar.scss';
+</style>

src/components/CMyAvatar/index.ts

@@ -0,0 +1 @@
+export { default as CMyAvatar } from './CMyAvatar.vue'