Vue.jsがEdgeで動作しません

vue初学者です。vue.jsを用い簡単な画像切り替えを行えるプログラムを書きました。ローカル環境なのですが
Chrmeでは正常に動作するのですが、Edgeでは正常に動作しません。

挙動

class"thumb"をクリックするとの部分の画像が切り替わる用になっています。
なぜでしょうか？
以下がソースコードです。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アルバムアプリ</title>

    <style>
        section img {
            max-width: 100%;
        }

        .center {
            margin: 0 auto 0 auto;
            max-width: 90%;
            width: 500px;
        }

        ul {
            display: flex;
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        li {
            flex: 1 1 auto;
            margin-right: 6px;
        }

        li:last-of-type {
            margin-right: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>

</head>

<body>
    <div id="app">
        <div class="center">
            <div>
                <img :src="imgSrc" id="bigimg">　<!--main-->
            </div>
            <ul>
                <li><img src="./img/thumb-img1.jpg" class="thumb" data-image="./img/img1.jpg"></li>
                <li><img src="./img/thumb-img2.jpg" class="thumb" data-image="./img/img2.jpg"></li>
                <li><img src="./img/thumb-img3.jpg" class="thumb" data-image="./img/img3.jpg"></li>
                <li><img src="./img/thumb-img4.jpg" class="thumb" data-image="./img/img4.jpg"></li>
            </ul>
        </div>

    </div>

    <script src="main.js"></script>
</body>

</html>

Vue.createApp({
    data: function () {
        return {
            imgSrc: "./img/img1.jpg",
        }
    },
    computed: {
        Thumbs: function () {
            const data = this;
            const thumbs = document.querySelectorAll('.thumb');
            console.log(thumbs);
            thumbs.forEach(function (item, index) {
                item.onclick = function () {
                    console.log(this.dataset.image);
                    data.imgSrc = this.dataset.image;
                }
            })

        }
    },
}).mount('#app')

環境

vue3.0
vsコード

試したこと

vueの教材をもっていましてその教材のコードはEdgeで動作するのですが、この私の考えたコードはEdgeで動作しません。
Edgeで確認すると、画像は表示されますので(の部分)":src"が有効になっていると考えるとVueそのものがおかしのではなく、”computed”のソースコードがあやしいと睨んでいます。たぶん”onclick”のあたり。。。

わかるかたお助けください

sousuke

2022/01/22 02:53

教材のコードはどのようになっているんですか？提示した方がいいと思います。

maisumakun

2022/01/22 06:46

・Edgeのバージョンはいくつですか？・ブラウザコンソールにエラーは出ていませんか？

tima0314

2022/01/22 07:52

edgeは最新版です。コンソールには”You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.” であとは何も表示されません。先ほどわかったのですが、chrmeでもリロード直後はjavascriptは動作しておらず、chrome拡張のvue.devtoolsを立ち上げるとjavascriptが動作するという不可解な現象がおきております。

tima0314

2022/01/22 07:56

教材のコードではなく私のオリジナルコードです。 edge自体に原因があるのではと教材のコードを試したのですがそれはしっかり動作しました。

tima0314

2022/01/23 00:10

maisumakunさんもありがとうございました。