diff --git a/frontend/src/views/ChannelMessages.vue b/frontend/src/views/ChannelMessages.vue
index 2f90f7b..8fa97ca 100644
--- a/frontend/src/views/ChannelMessages.vue
+++ b/frontend/src/views/ChannelMessages.vue
@@ -15,7 +15,7 @@
 import ListItem from "@/components/ListItem.vue";
 import { getChannel } from "@/services/channels";
 import { getChannelMessages } from "@/services/messages";
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
@@ -49,7 +49,8 @@ const loadMore = async () => {
   });
 }
 
-onMounted(async () => {
+
+const loadData = async () => {
   // get channel info
   channel.value = await getChannel(route.params.channel);
   console.log("channel", channel.value);
@@ -57,5 +58,8 @@ onMounted(async () => {
   // get channel messages
   messages.value = await getChannelMessages(route.params.channel, { offset: route.params.offset });
   console.log("messages", messages.value);
-});
+}
+
+watch(route, loadData);
+onMounted(loadData);
 </script>
diff --git a/frontend/src/views/FavoriteMessages.vue b/frontend/src/views/FavoriteMessages.vue
index c70c809..bb7e666 100644
--- a/frontend/src/views/FavoriteMessages.vue
+++ b/frontend/src/views/FavoriteMessages.vue
@@ -47,7 +47,10 @@ const loadMore = async () => {
   });
 }
 
-onMounted(async () => {
+const loadData = async () => {
   messages.value = await getFavoriteMessages({ offset: route.params.offset });
-});
+}
+
+watch(route, loadData);
+onMounted(loadData);
 </script>