【Vue.js】SPAで実装したスライドショーが動かない

前提・実現したいこと

SPAでHooperを使用し、スライドショーを実装したい。
Home のページのみでスライドショーを実装したい

発生している問題・エラーメッセージ

特にありません。

該当のソースコード

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8
9    <link rel="stylesheet" href="css/style.css">
10
11    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
12    <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>
13    <script src="https://unpkg.com/http-vue-loader"></script>
14
15    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.css">
16    <script src="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.min.js"></script>
17
18
19    <!-- Bootstrap CSS -->
20    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
21    
22    <!-- Bootstrap Javascript(jQuery含む) -->
23    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
24    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
25    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
26
27    
28</head>
29
30<body>
31    <header id="header">
32      <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
33        <a class="navbar-brand" href="#">miyacleApp</a>
34        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
35          <span class="navbar-toggler-icon"></span>
36        </button>
37        <div class="collapse navbar-collapse justify-content-end" id="navbarNav4">
38            <ul class="navbar-nav">
39                <li class="nav-item active">
40                    <router-link class="nav-link" to="/home">Home</router-link>
41                </li>
42                <li class="nav-item">
43                  <router-link class="nav-link" to="/about">About</router-link>
44                </li>
45                <li class="nav-item">
46                  <router-link class="nav-link" to="/contact">Contact</router-link>
47                </li>
48            </ul>
49
50        </div>
51      </nav>
52
53    </header>
54
55    <main id="main">
56      
57      <router-view></router-view>
58
59    </main>
60
61
62    <script src="js/sample.js"></script>
63      
64</body>
65</html>

home.vue

vue
1<template>
2    <div>
3        <b>{{ text }}</b>
4            
5        <div id="member" class="container">
6            <div class="row">
7
8                <member v-for="member in members" v-bind:key="member.id" v-bind:title="member.title"></member>
9                
10            </div>
11        </div>
12
13        <div id="app">
14            <hooper :auto-play="true" :play-speed="2000">
15        
16            <slide>
17                slide 1
18            </slide>
19            <slide>
20                slide 2
21            </slide>
22            <slide>
23                slide 3
24            </slide>
25            <slide>
26                slide 4
27            </slide>
28            </hooper>
29        </div>
30
31        
32    </div>
33</template>
34
35<script>
36    module.exports = {
37        data: function() {
38            return {
39                text: 'home',
40                members: [
41                    { id: 1, title: 'title1' },
42                    { id: 2, title: 'title2' },
43                    { id: 3, title: 'title3' },
44                    { id: 3, title: 'title4' },
45                ]
46            }
47        }
48    }
49
50    Vue.component('member', {
51        props: ['title'],
52        template: '<div class="col-md-4"><h2>{{ title }}</h2></div>'
53    })
54
55
56
57    new Vue({
58        el: "#app",
59        components: {
60            Hooper: window.Hooper.Hooper,
61            Slide: window.Hooper.Slide
62        }
63    })
64
65</script>
66
67<style scoped>
68.hooper-slide {
69    background-color: #62caaa;
70    padding: 20px;
71    display: flex;
72    justify-content: center;
73    align-items: center;
74    color: #fff;
75    border: 2px solid #fff;
76    font-size: 30px;
77    border-radius: 10px;
78  }
79</style>

sample.js

js
1const routes = [
2  { path: '/home', component: httpVueLoader('./home.vue') },
3  { path: '/about', component: httpVueLoader('./about.vue') },
4  { path: '/contact', component: httpVueLoader('./contact.vue') }
5];
6
7const router = new VueRouter({
8  routes
9});
10
11new Vue({
12  el: '#header',
13  router: router
14});
15
16new Vue({
17  el: '#main',
18  router: router
19});
20

試したこと

index.html に下記

html
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.css">
2<script src="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.min.js"></script>
3
4<div id="app">
5            <hooper :auto-play="true" :play-speed="2000">
6        
7            <slide>
8                slide 1
9            </slide>
10            <slide>
11                slide 2
12            </slide>
13            <slide>
14                slide 3
15            </slide>
16            <slide>
17                slide 4
18            </slide>
19            </hooper>
20        </div>

sample.js に下記

js
1new Vue({
2  el: "#app",
3  components: {
4      Hooper: window.Hooper.Hooper,
5      Slide: window.Hooper.Slide
6  }
7})

を記述したところ、正常に動作しましたが、SPAだとうまくいきません。。

補足情報（FW/ツールのバージョンなど）

html
1<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
2    <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>
3    <script src="https://unpkg.com/http-vue-loader"></script>
4
5    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.css">
6    <script src="https://cdn.jsdelivr.net/npm/hooper@0.2.1/dist/hooper.min.js"></script>