diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue
index 72fffba4..05f6ad51 100644
--- a/components/ui/Avatar.vue
+++ b/components/ui/Avatar.vue
@@ -36,6 +36,7 @@
 
 <script setup>
 const pixelated = ref(false)
+const img = ref(null)
 
 defineProps({
   src: {
@@ -72,10 +73,10 @@ defineProps({
 })
 
 function updatePixelated() {
-  if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) {
-    this.pixelated = true
+  if (img.value && img.value.naturalWidth && img.value.naturalWidth <= 96) {
+    pixelated.value = true
   } else {
-    this.pixelated = false
+    pixelated.value = false
   }
 }
 </script>