diff --git a/app/javascript/watch.vue b/app/javascript/components/watch.vue
similarity index 100%
rename from app/javascript/watch.vue
rename to app/javascript/components/watch.vue
diff --git a/app/javascript/watches.vue b/app/javascript/components/watches.vue
similarity index 98%
rename from app/javascript/watches.vue
rename to app/javascript/components/watches.vue
index 9c37a8816e6..03bcfe5c397 100644
--- a/app/javascript/watches.vue
+++ b/app/javascript/components/watches.vue
@@ -36,11 +36,12 @@
 </template>
 
 <script>
-import watch from 'watch.vue'
+import watch from 'components/watch.vue'
 import Pager from 'pager.vue'
 import LoadingListPlaceholder from 'loading-list-placeholder.vue'
 
 export default {
+  name: 'Watches',
   components: {
     watch: watch,
     loadingListPlaceholder: LoadingListPlaceholder,
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index ba37f633692..f4a69dc1560 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -40,7 +40,6 @@ import '../products.js'
 import '../courses-categories.js'
 import '../courses-practices.js'
 import '../no_learn.js'
-import '../watches.js'
 import '../searchables.js'
 import '../niconico_calendar.js'
 import '../user_mentor_memo.js'
@@ -78,6 +77,7 @@ import WorriedUsers from '../components/worried-users.vue'
 import Reports from '../components/reports.vue'
 import Users from '../components/users.vue'
 import User from '../components/user.vue'
+import Watches from '../components/watches.vue'
 
 const mounter = new VueMounter()
 mounter.addComponent(Hello)
@@ -90,4 +90,5 @@ mounter.addComponent(WorriedUsers)
 mounter.addComponent(Reports)
 mounter.addComponent(Users)
 mounter.addComponent(User)
+mounter.addComponent(Watches)
 mounter.mount()
diff --git a/app/javascript/watches.js b/app/javascript/watches.js
deleted file mode 100644
index 60e78f0a829..00000000000
--- a/app/javascript/watches.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Vue from 'vue'
-import Watches from 'watches.vue'
-
-document.addEventListener('DOMContentLoaded', () => {
-  const selector = '#js-watches'
-  const watches = document.querySelector(selector)
-  if (watches) {
-    new Vue({
-      render: (h) => h(Watches)
-    }).$mount(selector)
-  }
-})
diff --git a/app/views/current_user/watches/index.html.slim b/app/views/current_user/watches/index.html.slim
index 267807d93a3..7d8cd549395 100644
--- a/app/views/current_user/watches/index.html.slim
+++ b/app/views/current_user/watches/index.html.slim
@@ -8,4 +8,4 @@ header.page-header
 
 = render 'home/page_tabs', user: @user
 
-#js-watches
+div(data-vue="Watches")
diff --git a/app/views/watches/index.html.slim b/app/views/watches/index.html.slim
deleted file mode 100644
index eb17db75220..00000000000
--- a/app/views/watches/index.html.slim
+++ /dev/null
@@ -1,8 +0,0 @@
-- title 'Watch中一覧'
-header.page-header
-  .container
-    .page-header__inner
-      h2.page-header__title
-        = title
-
-#js-watches