diff --git a/frontend/pages/g/[groupSlug]/r/[slug]/index.vue b/frontend/pages/g/[groupSlug]/r/[slug]/index.vue
index 211765e59..e956e0720 100644
--- a/frontend/pages/g/[groupSlug]/r/[slug]/index.vue
+++ b/frontend/pages/g/[groupSlug]/r/[slug]/index.vue
@@ -19,20 +19,21 @@ import type { Recipe } from "~/lib/api/types/recipe";
 const $auth = useMealieAuth();
 const { isOwnGroup } = useLoggedInState();
 const route = useRoute();
-const title = ref(route.meta?.title ?? "");
+const title = ref(route.meta?.title as string || "");
 useSeoMeta({ title });
 
 const router = useRouter();
 const slug = route.params.slug as string;
 
 const recipe = ref<Recipe | null>(null);
-if (isOwnGroup.value) {
+function loadRecipe() {
   const { recipe: data } = useRecipe(slug);
   watch(data, (value) => {
     recipe.value = value;
   });
 }
-else {
+
+async function loadPublicRecipe() {
   const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
   const api = usePublicExploreApi(groupSlug.value);
   const { data } = await useAsyncData(useAsyncKey(), async () => {
@@ -47,6 +48,13 @@ else {
   recipe.value = data.value;
 }
 
+if (isOwnGroup.value) {
+  loadRecipe();
+}
+else {
+  onMounted(loadPublicRecipe);
+}
+
 whenever(
   () => recipe.value,
   () => {
diff --git a/frontend/pages/g/[groupSlug]/shared/r/[id].vue b/frontend/pages/g/[groupSlug]/shared/r/[id].vue
index b610439e7..6aabafde7 100644
--- a/frontend/pages/g/[groupSlug]/shared/r/[id].vue
+++ b/frontend/pages/g/[groupSlug]/shared/r/[id].vue
@@ -25,7 +25,7 @@ const router = useRouter();
 const recipeId = route.params.id as string;
 const api = usePublicApi();
 
-const title = ref(route.meta?.title ?? "");
+const title = ref(route.meta?.title as string ?? "");
 useSeoMeta({
   title,
 });