diff --git a/app/javascript/report.vue b/app/javascript/components/report.vue
similarity index 100%
rename from app/javascript/report.vue
rename to app/javascript/components/report.vue
diff --git a/app/javascript/reports.vue b/app/javascript/components/reports.vue
similarity index 97%
rename from app/javascript/reports.vue
rename to app/javascript/components/reports.vue
index 6aa1bf7fa05..16a024c1f61 100644
--- a/app/javascript/reports.vue
+++ b/app/javascript/components/reports.vue
@@ -38,12 +38,13 @@
     pager(v-bind='pagerProps')
 </template>
 <script>
-import Report from 'report.vue'
+import Report from 'components/report.vue'
 import UnconfirmedLink from 'unconfirmed_link.vue'
 import LoadingListPlaceholder from 'loading-list-placeholder.vue'
 import Pager from 'pager.vue'
 
 export default {
+  name: 'Reports',
   components: {
     report: Report,
     'unconfirmed-link': UnconfirmedLink,
@@ -52,11 +53,11 @@ export default {
   },
   props: {
     userId: {
-      type: String,
+      type: Number,
       default: null
     },
     companyId: {
-      type: String,
+      type: Number,
       default: null
     },
     limit: {
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index da8a0226af0..68fdc2e2b46 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -14,7 +14,6 @@ import '../learning-status.js'
 import '../check.js'
 import '../check-stamp.js'
 import '../unconfirmed-links-open.js'
-import '../reports.js'
 import '../comments.js'
 import '../notifications_bell.js'
 import '../question-page.js'
@@ -78,6 +77,7 @@ import Books from '../components/books.vue'
 import Pages from '../components/pages.vue'
 import Questions from '../components/questions.vue'
 import WorriedUsers from '../components/worried-users.vue'
+import Reports from '../components/reports.vue'
 
 const mounter = new VueMounter()
 mounter.addComponent(Hello)
@@ -87,4 +87,5 @@ mounter.addComponent(Books)
 mounter.addComponent(Pages)
 mounter.addComponent(Questions)
 mounter.addComponent(WorriedUsers)
+mounter.addComponent(Reports)
 mounter.mount()
diff --git a/app/javascript/reports.js b/app/javascript/reports.js
deleted file mode 100644
index 7b44e87501c..00000000000
--- a/app/javascript/reports.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import Reports from 'reports.vue'
-
-document.addEventListener('DOMContentLoaded', () => {
-  const selector = '#js-reports'
-  const reports = document.querySelector(selector)
-  if (reports) {
-    const userId = reports.getAttribute('data-user-id')
-    const limit = reports.getAttribute('data-limit')
-    const companyId = reports.getAttribute('company-id')
-    new Vue({
-      render: (h) =>
-        h(Reports, {
-          props: { userId: userId, limit: limit, companyId: companyId }
-        })
-    }).$mount(selector)
-  }
-})
diff --git a/app/views/companies/reports/index.html.slim b/app/views/companies/reports/index.html.slim
index a432b10eb3a..2b79639cae0 100644
--- a/app/views/companies/reports/index.html.slim
+++ b/app/views/companies/reports/index.html.slim
@@ -14,4 +14,4 @@ header.page-header
 
 .page-body
   .container.is-md
-    #js-reports(company-id="#{@company.id}")
+    div(data-vue="Reports" data-vue-company-id:number="#{@company.id}")
diff --git a/app/views/current_user/reports/index.html.slim b/app/views/current_user/reports/index.html.slim
index 77abc079bb4..0c92c14e670 100644
--- a/app/views/current_user/reports/index.html.slim
+++ b/app/views/current_user/reports/index.html.slim
@@ -16,7 +16,7 @@ header.page-header
 
 .page-body
   .container.is-md
-    #js-reports(data-user-id="#{current_user.id}")
+    div(data-vue="Reports" data-vue-user-id:number="#{current_user.id}")
     - if current_user.reports.present?
       .form-actions
         ul.form-actions__items
diff --git a/app/views/reports/index.html.slim b/app/views/reports/index.html.slim
index a13b1820861..99d5ec14c93 100644
--- a/app/views/reports/index.html.slim
+++ b/app/views/reports/index.html.slim
@@ -18,4 +18,4 @@ header.page-header
           = label_tag :practice_id, 'プラクティスで絞り込む', class: 'a-form-label'
           = select_tag :practice_id, options_from_collection_for_select(current_user.practices, :id, :title, selected: params[:practice_id]), include_blank: '全ての日報を表示', onchange: 'this.form.submit()', id: 'js-choices-single-select'
 
-    #js-reports
+    div(data-vue="Reports")
diff --git a/app/views/reports/show.html.slim b/app/views/reports/show.html.slim
index fb9097caeab..a25293ecbfe 100644
--- a/app/views/reports/show.html.slim
+++ b/app/views/reports/show.html.slim
@@ -161,7 +161,7 @@ header.page-header
                     | 提出物
             .side-tabs-contents
               .side-tabs-contents__item#side-tabs-content-1
-                #js-reports(data-user-id="#{@report.user.id}" data-limit="10")
+                div(data-vue="Reports" data-vue-user-id:number="#{@report.user.id}" data-vue-limit="10")
               .side-tabs-contents__item#side-tabs-content-2.is-only-mentor
                 .user-info
                   = render 'users/user_secret_attributes', user: @report.user
@@ -181,7 +181,7 @@ header.page-header
                           .o-empty-message__text
                             | 提出物はまだありません。
         - else
-          #js-reports(data-user-id="#{@report.user.id}" data-limit="10")
+          div(data-vue="Reports" data-vue-user-id:number="#{@report.user.id}" data-vue-limit="10")
 
 - if flash[:notify_help] && flash[:celebrate_report_count]
     = render '/shared/modal', id: 'modal-notify-help', modal_title: '🎉 おめでとう！', auto_show: true
diff --git a/app/views/reports/unchecked/index.html.slim b/app/views/reports/unchecked/index.html.slim
index f8d14bdd804..1b80c606cc8 100644
--- a/app/views/reports/unchecked/index.html.slim
+++ b/app/views/reports/unchecked/index.html.slim
@@ -11,4 +11,4 @@ header.page-header
 
 .page-body
   .container.is-md
-    #js-reports
+    div(data-vue="Reports")
diff --git a/app/views/talks/show.html.slim b/app/views/talks/show.html.slim
index 3e087aab8a6..924744b36de 100644
--- a/app/views/talks/show.html.slim
+++ b/app/views/talks/show.html.slim
@@ -90,4 +90,4 @@ header.page-header
                                   class: 'a-button is-sm is-danger is-block'
                 #js-user-mentor-memo(data-user-id="#{@user.id}" data-products-mode="#{true}")
               .side-tabs-contents__item#side-tabs-content-2
-                #js-reports(data-user-id="#{@user.id}" data-limit="10")
+                div(data-vue="Reports" data-vue-user-id:number="#{@user.id}" data-vue-limit="10")
diff --git a/app/views/users/reports/index.html.slim b/app/views/users/reports/index.html.slim
index fc033afd541..56fb65d4ddf 100644
--- a/app/views/users/reports/index.html.slim
+++ b/app/views/users/reports/index.html.slim
@@ -18,4 +18,4 @@ header.page-header
 
 .page-body
   .container.is-md
-    #js-reports data-user-id="#{params[:user_id]}"
+    div(data-vue="Reports" data-vue-user-id:number="#{params[:user_id]}")
diff --git a/test/system/api/check/reports_test.rb b/test/system/api/check/reports_test.rb
index 16dd81a4157..201dd58f9a8 100644
--- a/test/system/api/check/reports_test.rb
+++ b/test/system/api/check/reports_test.rb
@@ -31,10 +31,9 @@ class Check::ReportsTest < ApplicationSystemTestCase
       click_button '日報を確認'
     end
     click_button '日報の確認を取り消す'
-    within('.page-content') do
-      assert_no_text '確認済'
-    end
+
     assert_button '日報を確認'
+    assert_no_css 'stamp stamp-approve'
   end
 
   test 'comment and check report' do