TypeError: Cannot read propertyの解決

前提・実現したいこと

settings.htmlにて、LocalStorageに追加した画像と名言を
index.htmlにて表示させたいです。
ファイル配置はあるディレクトリに
-free.pic/(画像フォルダで、このフォルダ下に画像ファイルが直接入ってます(下にディレクトリはないという意味です))
-index.html
-index.js
-package-lock.json（載せてません)
-package.json(載せてません)
-settings.html
-settings.js
-datas.html
としております。みなさんがやられる場合には、同じディレクトリに5つのコードとfree.picディレクトリを入れてもらって
free.picの中に適当な画像を入れていただけると助かります。

ブラウザのタブにindex.htmlとsettings.htmlをドラッグ&ドロップしていただくと問題がご覧になれます。

またこちらの画像から、localStorageにはきちんと追加できています。

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

上の1枚目の画像のように、pictureというプロパティをもつオブジェクト？がないというエラーが出ます。
たしかにsettings.jsの8行目で  datas[]:''　　としているので間違いではないのですが、
index.htmlの11行目で  v-if="datas.length"  としているので、仮にまだdatasに何も追加されていない
のであれば、v-elseの方を通るはずなので、エラーの出ているところを通らないと思うのです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>index.htmlです</title>
7  </head>
8
9  <body>
10    <div id="app">
11      <div v-if="datas.length">
12        <h3>画像</h3>
13        <img v-bind:src="datas[nowItem].picture" width="200" height="200">
14        <h3>名言</h3>
15        <p>{{ datas[nowItem].quote }}</p>
16      </div>
17      <div v-else>
18        <p>画像と名言をセットしてください</p>
19      </div>
20      <p><button @click="change">次へ</button></p>
21    </div>
22    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
23    <script src="settings.js"></script>
24
25  </body>
26
27</html>

javascript
1//settings.jsです
2(function(){
3  'use strict';
4  const vm = new Vue({
5    el: '#app',
6    data:{
7      newItem:'',
8      nowItem:'',
9      datas:[]
10    },
11    watch:{
12
13      datas:{
14        handler: function(){
15          localStorage.setItem('datas', JSON.stringify(this.datas));
16          alert('データが保存されました');
17        },
18        deep: true
19      }
20    },
21    mounted: function(){
22      this.datas = JSON.parse(localStorage.getItem('datas')) || [];
23    },
24    methods:{
25      addItem: function(){
26        const item = {
27          picture: 'free_pic/' + document.getElementById("picture").files[0].name,
28          quote: this.newItem
29        }
30        this.datas.push(item);
31        this.newItem = '';
32      },
33      deleteItem: function(index){
34        this.datas.splice(index, 1);
35      },
36      change: function(){
37        this.nowItem = Math.floor(Math.random()*this.datas.length);
38      }
39    }
40  });
41}());
42

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>settings.htmlです</title>
7  </head>
8
9  <body>
10    <div id="app">
11      <form>
12        <label for="sentence">追加する文章</label><br>
13        <textarea id="sentence" rows="5" cols="40" v-model="newItem"></textarea>
14        <br>
15        <label for="picture">追加する画像</label><br>
16        <input type="file" id="picture">
17        <button @click.prevent="addItem">決定</button>
18      </form>
19
20      <p><a href="datas.html" target="_blank">画像一覧</a></p>
21    </div>
22
23    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
24    <script src="settings.js"></script>
25  </body>
26
27</html>

javascript
1//index.jsです
2'use strict';
3
4const electron = require("electron");
5const app = electron.app;
6const BrowserWindow = electron.BrowserWindow;
7const Menu = electron.Menu;
8const dialog = electron.dialog;
9let mainWindow;
10let settingsWindow;
11
12let menuTemplate = [{
13  label: 'MyApp',
14  submenu: [
15    { label: 'About' , accelerator: 'CmdOrCtrl+Shift+A', click: function() { showAboutDialog(); }},
16    { type: 'separator' },
17    { label: 'Settings' , accelerator: 'CmdOrCtrl+,', click: function() { showSettingsWindow(); }},
18    { type: 'separator' },
19    { label: 'Quit' , accelerator: 'CmdOrCtrl+Q', click: function() { app.quit(); }}
20  ]
21}];
22
23let menu = Menu.buildFromTemplate(menuTemplate);
24
25function createMainWindow(){
26   Menu.setApplicationMenu(menu);
27   mainWindow = new BrowserWindow({
28     width: 800,
29     height: 600,
30     webPreferences: {webSecurity: false}
31   });
32   mainWindow.loadURL('file://' + __dirname + '/index.html');
33   mainWindow.on('closed', function() {
34     mainWindow = null;
35   });
36}
37
38function showSettingsWindow() {
39  settingsWindow = new BrowserWindow({width: 600, height: 400});
40  settingsWindow.loadURL('file://' + __dirname + '/settings.html');
41  settingsWindow.show();
42  settingsWindow.on('closed', function() {
43    settingsWindow = null;
44  });
45}
46
47function showAboutDialog(){
48  dialog.showMessageBox({
49    type: 'info',
50    buttons: ['OK'],
51    message: 'About This App',
52    detail: 'This app was created by'
53  });
54}
55
56app.on('ready', function() {
57  createMainWindow();
58});
59
60app.on('window-all-closed', function() {
61  if (process.platform != 'darwin') {
62    app.quit();
63  }
64});
65
66app.on('activate', function() {
67  if (mainWindow === null) {
68    createMainWindow();
69  }
70});
71

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <title>datas.htmlです</title>
  </head>

  <body>
    <div id="app">
      <h1>データ一覧</h1>
      <ul>
        <li v-for="(data, index) in datas">
          <img v-bind:src="data.picture" width="70" height="70">
          <p>{{ data.quote }}
            <span @click="deleteItem(index)">[x]</span>
          </p>
        </li>
      </ul>
  </body>

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

</html>