vue_cliとjavascriptで実行結果が異なる

配列sourceに数値にのように数値を10個生成し、そこからランダムに５つ取り出し配列arrayに格納する
生成された配列arrayを多次元配列listsに格納し、以下のような例のlistsを作りたいと考えています。

lists:[[0,1,2,3,4][11,12,13,14,15][20,21,22,23,24]]

しかし実際に作ってみると、最後の配列のものが多重に作られてしまいます。
以下のような感じ

lists[[20,21,22,23,24][20,21,22,23,24][20,21,22,23,24]]

html内でjavascriptで書くと希望通りの動作となるのですが、
vue cli内で書くと動作が上記のようになってしまいます。

何が理由か分からず、原因についてご教授頂けないでしょうか。

javascript

   <script>
        function create(num){
            const source =[];
            for(i=0;i<10;i++){
                source[i] = i + 1 + 10 * num
            }
            const array = [];
            for(let i = 0;i<5;i++){
                array[i] = source.splice(Math.floor(Math.random() * source.length),1)[0];
            }
            return array
        }
        const lists = []
        lists[0] = create(0)
        lists[1] = create(1)
        lists[2] = create(2)
        lists[3] = create(3)
        lists[4] = create(4)

        console.table(lists)
    </script>

Vue


<template lang="pug">
button(@click="click")  click
p {{source}}
p {{array}}
p {{lists}}
</template>

<script>
export default {
    data() {
        return {
            source: [],
            array: [],
            lists: [],
        };
    },

    methods: {
create(num) {
            for (let i = 0; i < 10; i++) {
                this.source[i] = i + 1 + 10 + num;
            }
            for (let i = 0; i < 5; i++) {
                this.array[i] = this.source.splice(
                    Math.floor(Math.random() * this.source.length),
                    1
                )[0];
            }
                return this.array;
        },

        click() {
            this.lists[0] = this.create(0);
            this.lists[1] = this.create(1);
            this.lists[2] = this.create(2);
            this.lists[3] = this.create(3);
        },
    },
};
</script>