fix: replace $raw() -> $$() and $computed let declare

src/components/AppNavigation.vue

@@ -44,10 +44,10 @@ interface NavLink {
   display: 'all' | 'anonym' | 'authorized'
 }
 
-const username = $computed(() => user.value?.username)
-const displayStatus = $computed(() => username ? 'authorized' : 'anonym')
+let username = $computed(() => user.value?.username)
+let displayStatus = $computed(() => (username ? 'authorized' : 'anonym'))
 
-const allNavLinks = $computed<NavLink[]>(() => [
+let allNavLinks = $computed<NavLink[]>(() => [
   {
     name: 'global-feed',
     title: 'Home',
@@ -83,7 +83,7 @@ const allNavLinks = $computed<NavLink[]>(() => [
   },
 ])
 
-const navLinks = $computed(() => allNavLinks.filter(
-  l => l.display === displayStatus || l.display === 'all',
-))
+let navLinks = $computed(() =>
+  allNavLinks.filter((l) => l.display === displayStatus || l.display === 'all'),
+)
 </script>

src/components/AppPagination.vue

@@ -28,7 +28,7 @@ const emit = defineEmits<{
   (e: 'page-change', index: number): void
 }>()
 
-const pagesCount = $computed(() => Math.ceil(props.count / limit))
+let pagesCount = $computed(() => Math.ceil(props.count / limit))
 
 const isActive = (index: number) => props.page === index
 const onPageChange = (index: number) => emit('page-change', index)

src/components/ArticleDetail.vue

@@ -51,7 +51,7 @@ import ArticleDetailMeta from './ArticleDetailMeta.vue'
 const route = useRoute()
 const slug = route.params.slug as string
 let article = $ref<Article>(await getArticle(slug))
-const articleHandledBody = $computed(() => marked(article.body))
+let articleHandledBody = $computed(() => marked(article.body))
 const updateArticle = (newArticle: Article) => {
   Object.assign(article, newArticle)
 }

src/components/ArticleDetailComment.vue

@@ -54,5 +54,5 @@ const emit = defineEmits<{
   (e: 'remove-comment'): boolean
 }>()
 
-const showRemove = $computed(() => (props.username !== undefined && props.username === props.comment.author.username))
+let showRemove = $computed(() => (props.username !== undefined && props.username === props.comment.author.username))
 </script>

src/components/ArticleDetailComments.vue

@@ -25,7 +25,7 @@ import ArticleDetailCommentsForm from './ArticleDetailCommentsForm.vue'
 const route = useRoute()
 const slug = route.params.slug as string
 
-const username = $computed(() => user.value?.username)
+let username = $computed(() => user.value?.username)
 
 let comments = $ref<ArticleComment[]>([])
 

src/components/ArticleDetailCommentsForm.vue

@@ -50,8 +50,8 @@ const emit = defineEmits<{
   (e: 'add-comment', comment: ArticleComment): void
 }>()
 
-const username = $computed(() => checkAuthorization(user) ? user.value.username : '')
-const { profile } = useProfile({ username: $raw(username) })
+let username = $computed(() => checkAuthorization(user) ? user.value.username : '')
+const { profile } = useProfile({ username: $$(username) })
 
 let comment = $ref('')
 

src/components/ArticleDetailMeta.vue

@@ -79,11 +79,11 @@ const emit = defineEmits<{
 }>()
 
 const { article } = $fromRefs(props)
-const displayEditButton = $computed(() => checkAuthorization(user) && user.value.username === article.author.username)
-const displayFollowButton = $computed(() => checkAuthorization(user) && user.value.username !== article.author.username)
+let displayEditButton = $computed(() => checkAuthorization(user) && user.value.username === article.author.username)
+let displayFollowButton = $computed(() => checkAuthorization(user) && user.value.username !== article.author.username)
 
-const isFavorited = $computed(() => article.favorited)
-const articleSlug = $computed(() => article.slug)
+let isFavorited = $computed(() => article.favorited)
+let articleSlug = $computed(() => article.slug)
 const { favoriteProcessGoing, favoriteArticle } = useFavoriteArticle({
   isFavorited,
   articleSlug,
@@ -95,8 +95,8 @@ const onDelete = async () => {
   await routerPush('global-feed')
 }
 
-const following = $computed(() => article.author.following)
-const username = $computed(() => article.author.username)
+let following = $computed(() => article.author.following)
+let username = $computed(() => article.author.username)
 const { toggleFollow, followProcessGoing } = useFollow({
   following,
   username,

src/components/ArticlesListArticlePreview.vue

@@ -61,8 +61,8 @@ const emit = defineEmits<{
   (e: 'update', article: Article): void
 }>()
 
-const isFavorited = $computed(() => props.article.favorited)
-const articleSlug = $computed(() => props.article.slug)
+let isFavorited = $computed(() => props.article.favorited)
+let articleSlug = $computed(() => props.article.slug)
 
 const { favoriteProcessGoing, favoriteArticle } = useFavoriteArticle({
   isFavorited,

src/components/ArticlesListNavigation.vue

@@ -46,7 +46,7 @@ interface ArticlesListNavLink {
   icon?: string
 }
 
-const allLinks = $computed<ArticlesListNavLink[]>(() => [
+let allLinks = $computed<ArticlesListNavLink[]>(() => [
   {
     name: 'global-feed',
     routeName: 'global-feed',
@@ -78,7 +78,7 @@ const allLinks = $computed<ArticlesListNavLink[]>(() => [
   },
 ])
 
-const show = $computed<Record<ArticlesType, boolean>>(() => ({
+let show = $computed<Record<ArticlesType, boolean>>(() => ({
   'global-feed': props.useGlobalFeed ?? false,
   'my-feed': (props.useMyFeed && isAuthorized.value) ?? false,
   'tag-feed': (props.useTagFeed && props.tag !== '') ?? false,
@@ -86,5 +86,5 @@ const show = $computed<Record<ArticlesType, boolean>>(() => ({
   'user-favorites-feed': (props.useUserFavorited && props.username !== '') ?? false,
 }))
 
-const links = $computed<ArticlesListNavLink[]>(() => allLinks.filter(link => show[link.name]))
+let links = $computed<ArticlesListNavLink[]>(() => allLinks.filter(link => show[link.name]))
 </script>

src/pages/EditArticle.vue

@@ -80,7 +80,7 @@ interface FormState {
 
 const route = useRoute()
 const router = useRouter()
-const slug = $computed<string>(() => route.params.slug as string)
+let slug = $computed<string>(() => route.params.slug as string)
 
 let form = $ref<FormState>({
   title: '',

src/pages/Profile.vue

@@ -74,19 +74,19 @@ import { checkAuthorization, user } from 'src/store/user'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const username = $computed<string>(() => route.params.username as string)
+let username = $computed<string>(() => route.params.username as string)
 
-const { profile, updateProfile } = useProfile({ username: $raw(username) })
+const { profile, updateProfile } = useProfile({ username: $$(username) })
 
-const following = $computed<boolean>(() => profile.value?.following ?? false)
+let following = $computed<boolean>(() => profile.value?.following ?? false)
 const { followProcessGoing, toggleFollow } = useFollow({
   following,
   username,
   onUpdate: (newProfileData: Profile) => updateProfile(newProfileData),
 })
 
-const showEdit = $computed<boolean>(() => checkAuthorization(user) && user.value.username === username)
-const showFollow = $computed<boolean>(() => user.value?.username !== username)
+let showEdit = $computed<boolean>(() => checkAuthorization(user) && user.value.username === username)
+let showFollow = $computed<boolean>(() => user.value?.username !== username)
 </script>
 
 <style scoped>

src/pages/Settings.vue

@@ -103,7 +103,7 @@ onMounted(async () => {
   form.email = user.value.email
 })
 
-const isButtonDisabled = $computed(() => (
+let isButtonDisabled = $computed(() => (
   form.image === user.value?.image &&
   form.username === user.value?.username &&
   form.bio === user.value?.bio &&