Replace inline style with v-show to control Detect Result's visibility.

src/App.vue

@@ -5,7 +5,7 @@
   <main class="container">
     <image-form @detect-responsed="onDetectResponsed"></image-form>
     <detect-result
-      :visible="detectResult.visible"
+      v-show="detectResultShow"
       :diseaseName="detectResult.diseaseName"
       :imageUrl="detectResult.imageUrl"
       :trustworthiness="detectResult.trustworthiness"
@@ -34,14 +34,14 @@ export default {
         diseaseName: "",
         imageUrl: "",
         trustworthiness: 0.0,
-        visible: false,
       },
+      detectResultShow: false,
     };
   },
   methods: {
     onDetectResponsed(res) {
       this.detectResult = res.data;
-      this.detectResult.visible = true;
+      this.detectResultShow = true;
     },
   },
 };

src/components/DetectResult.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="py-1 text-center container">
     <div class="row py-lg-3">
-      <div class="col-lg-6 col-md-8 mx-auto" :hidden="!visible">
+      <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="mb-3 text-center">Detect Result</h1>
         <img
           class="img-thumbnail my-2 w-25"
@@ -23,7 +23,6 @@ export default {
     diseaseName: { type: String },
     imageUrl: { type: String },
     trustworthiness: { type: Number },
-    visible: { tyep: Boolean, default: false },
   },
 };
 </script>