更新を実装

frontend/src/views/PostView.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import MainLayout from '@/components/MainLayout.vue';
-import { useRoute } from 'vue-router';
+import { onBeforeRouteUpdate, type RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
 import { getPost, type GetPostResponse } from '@/features/api';
-import {ref, watch} from 'vue';
+import { computed, onMounted, onRenderTriggered, ref, watch } from 'vue';
 import Post from '@/components/Post.vue';
 import NewPostSection from '@/components/NewPostSection.vue';
 import { convertReactions } from '@/features/reactions';
@@ -11,15 +11,15 @@ const route = useRoute();
 if (route.params.id == undefined) {
   // TODO: error, id not found
 }
-const id = route.params.id as string;
+// const id = route.params.id as string;
 const postContent = ref<GetPostResponse>();
-const loadPost = () => {
+const loadPost = (id: string) => {
   getPost(id).then((e) => (postContent.value = e));
 };
-loadPost();
+loadPost(useRoute().params.id as string);
 
-watch(useRoute(), (_, __) => {
-  location.reload();
+onBeforeRouteUpdate((to, from, next) => {
+  loadPost(to.params.id as string);
 });
 </script>
 
@@ -34,7 +34,7 @@ watch(useRoute(), (_, __) => {
             :name="ancestor.post.user_name"
             :reactions="convertReactions(ancestor.post.reactions, ancestor.post.my_reactions)"
             :id="ancestor.post.id"
-            @react="loadPost"
+            @react="() => loadPost(useRoute().params.id as string)"
           />
         </div>
         <hr />
@@ -44,10 +44,14 @@ watch(useRoute(), (_, __) => {
           :name="postContent.user_name"
           :reactions="convertReactions(postContent.reactions, postContent.my_reactions)"
           :id="postContent.id"
-          @react="loadPost"
+          @react="() => loadPost(useRoute().params.id as string)"
         />
         <hr />
-        <NewPostSection name="" :parent-id="postContent.id" @submit="loadPost" />
+        <NewPostSection
+          name=""
+          :parent-id="postContent.id"
+          @submit="() => loadPost(useRoute().params.id as string)"
+        />
         <!-- TODO: -->
         <div v-for="child in postContent.children" :key="child.post.id">
           <Post
@@ -56,7 +60,7 @@ watch(useRoute(), (_, __) => {
             :name="child.post.user_name"
             :reactions="convertReactions(child.post.reactions, child.post.my_reactions)"
             :id="child.post.id"
-            @react="loadPost"
+            @react="() => loadPost(useRoute().params.id as string)"
           />
         </div>
       </div>