Electronアプリで、LocalStorageに追加したデータを、ウィンドウを閉じずに読み込みたい

前提・実現したいこと

下記のコードから、実行ファイルを作ること。
ただし、settings.htmlで画像と文章をセットすると、メインウィンドウ(index.html)を一度も閉じることなく
次へボタンを押すとそのセットが表示されるようにしたいです。

下記のコードが入ったorg1-1ディレクトリにおいて、
npm i electron-packager --save-dev
node_modules/.bin/electron-packager ./ org1-1 --platform=darwin --arch=x64 --electron-version=1.4.13
のコマンドを実行しました。

上記のコマンドを打つ前のファイルの配置は、org1-1ディレクトリ下に
-free.pic/(画像フォルダで、このフォルダ下に画像ファイルが直接入ってます(下にディレクトリはないという意味です))
-index.html
-index.js
-package-lock.json（載せてません)
-package.json
-settings.html
-settings.js
-datas.html
となっていて、
実際に実行ファイルを作っていただくには、org1-1ディレクトリで上の2つのコマンドを実行してもらうとできると思います。

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

上のようにして作ったアプリを実際に起動します。
settings.htmlで画像と文章をセットして「データを保存しました」とアラートは出て、
画像一覧を押すとdatas.htmlのウィンドウが出て先ほどセットしたものが追加されているのですが、
index.htmlの次へボタンを押しても、そのセットは表示されなくて、一度index.htmlのウィンドウを
閉じないとそのセットは読み込まれないです。

該当のソースコード

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>

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>setting.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

javascript
1//settings.jsです
2(function(){
3  'use strict';
4  const vm = new Vue({
5    el: '#app',
6    data:{
7      newItem:'',
8      nowItem:'0',
9      datas:[]
10    },
11    watch:{
12
13      datas:{
14        handler: function(){
15          localStorage.setItem('datas', JSON.stringify(this.datas));
16          alert('データが保存されました');
17          // settings.htmlで追加した画像と文章がindex.htmlで反映されないので
18          // 付け足してみた1行
19          //結果：データが保存されましたというアラートが無限に表示されてできなかった
20          // this.datas = JSON.parse(localStorage.getItem('datas')) || [];
21        },
22        deep: true
23      }
24    },
25    mounted: function(){
26      this.datas = JSON.parse(localStorage.getItem('datas')) || [];
27    },
28    methods:{
29      addItem: function(){
30        const item = {
31          picture: 'free_pic/' + document.getElementById("picture").files[0].name,
32          quote: this.newItem
33        }
34        this.datas.push(item);
35        this.newItem = '';
36        // settingsで追加した画像と名言がindexで反映されないので
37        // 付け足してみた1行
38        //結果：できない
39        // this.datas = JSON.parse(localStorage.getItem('datas')) || [];
40      },
41      deleteItem: function(index){
42        this.datas.splice(index, 1);
43      },
44      change: function(){
45        this.nowItem = Math.floor(Math.random()*this.datas.length);
46      }
47    }
48  });
49}());
50

wakarimasen
1//package.jsonです
2{
3  "name": "org1-1",
4  "version": "1.0.0",
5  "description": "",
6  "main": "index.js",
7  "scripts": {
8    "start": "electron index.js",
9    "test": "echo \"Error: no test specified\" && exit 1"
10  },
11  "keywords": [],
12  "author": "",
13  "license": "ISC",
14  "devDependencies": {
15    "electron-packager": "^13.1.1"
16  }
17}
18