Vue.js Cannot find element: appエラー

Question

Vue.jsで[Vue warn]: Cannot find element: appエラーが発生します
webフレームワークはrailsです
うまく行けばHelloと表示させる実装です

Vue.js導入方法

###関連ファイル
index.html

<div id="app">
 <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<%= javascript_pack_tag 'top_vue' %>

app/javascript/packs/top_vue.js

var app = new Vue({
  el: 'app',
  data: {
    message: "Hello"
  }
})

エラー

[Vue warn]: Cannot find element: app
warn @ vue.js:634
query @ vue.js:5666
Vue.$mount @ vue.js:11882
Vue._init @ vue.js:5012
Vue @ vue.js:5078
./app/javascript/packs/top_vue.js @ top_vue.js:1
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

####考察

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

に原因があり？

<%# <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script> %>

などに変えてみたが、1 warringの所に同じエラー文が発生し変わらず

Answer 1

el: 'app',

じゃなくて

el: '#app',

じゃないですかね？ idを指定する場合は#を付けます。

Comments

[Meitoku]

ありがとうございます

補足
もう一つ原因があり
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
をbodyタグの一番上に記述