FirebaseとVue.jsでリアルタイムに反映される掲示板でVue.js部分が反応しない

#背景
FirebaseとVue.jsでリアルタイムに反映される掲示板を作成しています。
こちらのサイトを写経しています。

サイトに従って一通り写し終えたのですが、上手くVue.js部分が反映され無かったので、質問させて頂きたいです。

#エラーコード

1つ目:title
1[Vue warn]: Property or method "lists" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

2つ目:title
1[Vue warn]: Unknown custom element: <board-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

#ソースコード

index.html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>board_app</title>
7  <link href="index.css" rel="stylesheet">
8
9  <!-- The core Firebase JS SDK is always required and must be listed first -->
10  <script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js"></script>
11    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>
12    <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
13
14
15  <!-- TODO: Add SDKs for Firebase products that you want to use
16     https://firebase.google.com/docs/web/setup#config-web-app -->
17
18  <script>
19    // Your web app's Firebase configuration
20    var firebaseConfig = {
21      apiKey: "",
22      authDomain: "",
23      databaseURL: "",
24      projectId: "",
25      storageBucket: "",
26      messagingSenderId: "",
27      appId: ""
28    };
29    // Initialize Firebase
30    firebase.initializeApp(firebaseConfig);
31  </script>
32</head>
33
34<body>
35  <div id="board">
36    <h2 class="board-title">掲示板</h2>
37    <ul class="lists" style="list-style-type: none">
38      <board-list v-for="(list, key) in lists" :key="key" :name="list.name" :message="list.message" :date="list.date">
39      </board-list>
40
41    </ul>
42    <board-form v-on:input="doAdd"></board-form>
43  </div>
44
45  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
46  <script src="index.js"></script>
47</body>
48
49</html>

java
1Vue.component('board-list', {
2	template: '<li class="board-list"><div class="board-list__upper">名前:{{name}}{{date}}</div>{{message}}</li>',
3	props: ['name', 'message', 'date', 'id'],
4})
5
6Vue.component('board-form', {
7	template: '<div class="form-area">名前 : <input v-model="name"> </br>コメント: \
8  <textarea v-model="message"></textarea> </br><button v-on:click="doAdd">書き込む</button></div>',
9	data: function () {
10		return {
11			message: '',
12			name: ''
13		}
14	},
15	methods: {
16		doAdd: function () {
17			this.$emit('input', this.name, this.message)
18			this.message = ''
19			this.name = ''
20		}
21	}
22})
23
24var board = new Vue({
25	el: '#board',
26	data: {
27		lists: [
28		]
29	},
30	created: function () {
31		var vue = this;
32		firebase.database().ref('board').on('value', function (snapshot) {
33			vue.lists = snapshot.val();
34		});
35	},
36	methods: {
37		doAdd: function (name, message) {
38			var now = new Date();
39			firebase.database().ref('board').push({
40				name: name,
41				message: message,
42				date: now.getMonth() + 1 + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分'
43			});
44		}
45	}
46})

KuwabataK

2019/09/09 15:09

掲示されているコードをコピペして動かしてみましたが、私の環境ではうまく動いてくれました。(chromeで確認) firebaseにいくつか投稿を書き込んでしまったので、問題があれば消してください。書き込まれたくないのであれば、firebase設定部分のapiKeyなどは隠しておいたほうが良いと思いますエラーを読む限りでは、可能性としてはindex.jsがうまく読み込まれていない、もしくはプロキシなどのせいで、CDNからvue.jsがうまく読み込まれていないなどが考えられるので、ネットワーク周りを疑ってみるのが良いと思います。

gunners6518

2019/09/09 23:14

KuwabataKさん。ご返信ありがとうございます！！コード自体は上手く動いてくれる事、承知しました。 firebaseを確認した所、書き込み等も確認できました。 apikeyについても指摘して頂きありがとうございます。今後はそういった情報には注意しようと思います。自分の環境でも書き込み等ができるようにネットワーク関連を試行錯誤してみようと思います。丁寧に回答してくださり本当にありがとうございました！！