Vue.jsでWerAPI(JSON)のデータを出力できない

Question

事象

題名どおりです。Vue.jsでJSON形式のデータのコンソール出力まではできましたが
HTMLで表示することができませんでした

コード

※実際にはurl = "https://~"でデータをとっています（コンソール出力確認済み）

出力結果

画面には何も表示されませんでした…

本を読みながら書いたのですが、原因がわかりませんでした。

Answer 1

new Vue({
  el: '#app',
　　　：
})

ぱっと見の予想ですが、たぶんelオプションでDOMとバインドさせてないのが原因だと思います

---

質問が変更されたのんで追記

エラーメッセージの通り、ランタイム限定のVueを読み込んでいるので完全版の方のVueを読み込んでください。

公式ドキュメントのさまざまなビルドについてを参照してください。

---

コメントへの返信を追記

同じエラーのままでした。正直、公式を読んでもランタイムの切り替え方法がよくわかりません

1. node_module\vue\dist\vue.esm.jsをご自身が作成したjsと同じフォルダにコピー
2. コピーしたファイルからimportする。(import Vue from './vue.esm.js')

要は、完全版のVueをローカルにコピーしてimportする事で、確実にVue.esm.jsの方を読み込んで下さい。
これで、問題が解決するようであれば、この問題についてはランタイム版の方のVueを読み込んでいるのが原因とはっきりすると思います。

Comments

[anomer]

すみません、途中でそのことに気づいて、質問を更新しました…

[退会済みユーザー]

追記しました。

[anomer]

①npm install -D vue-loaderをたたく
②node_modules/vuetify-loader/dev/webpack.config.jsに下記を設定
③node_modules/webpack-dev-server/client/webpack.config.jsに下記を設定

resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},

同じエラーのままでした。正直、公式を読んでもランタイムの切り替え方法がよくわかりません

[退会済みユーザー]

追記しました。
vue.esm.jsを確実に読み込んでみてどうなるか確認して見てください。

[anomer]

出力できました！ありがとうございます！！

[退会済みユーザー]

本来はjsのコピーなどせず、webpack等を用いてVueを読み込む方が良いです、
現状は暫定的にこれで動かし、正しい環境構築の仕方は別途調べたほうが良いです。
どこから調べたら良いかわからなければ、とりあえずVueCli( https://cli.vuejs.org/ )で環境構築できるように調べるとよいと思います。

Answer 2

HTML内のscriptタグでVueを書いたjavaScriptファイルを読み込んでいないからではないでしょうか。