Vue Js Data Encode to base64 with 'private key'

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Data Encode to base64 with 'private key' </h3>
        <p>Original String: {{ originalString }} | Private Key: {{privateKey}}</p>
        <p>Encoded String: {{ encodedString }}</p>

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    originalString: "hello world",
                    privateKey: "myPrivateKey",
                    encodedString: "",
                };
            },
            mounted() {
                this.encodeToBase64();
            },
            methods: {
                async encodeToBase64() {
                    const data = this.originalString;
                    const privateKey = this.privateKey;
                    const encoder = new TextEncoder();
                    const dataUint8 = encoder.encode(data);
                    const keyUint8 = new TextEncoder().encode(privateKey);
                    const algorithm = { name: "PBKDF2" };
                    const derivedKey = await window.crypto.subtle.importKey(
                        "raw",
                        keyUint8,
                        algorithm,
                        false,
                        ["deriveKey"]
                    );
                    const encodedKey = await window.crypto.subtle.deriveKey(
                        {
                            name: "PBKDF2",
                            salt: new Uint8Array([0, 1, 2, 3]),
                            iterations: 10000,
                            hash: "SHA-256",
                        },
                        derivedKey,
                        { name: "AES-GCM", length: 256 },
                        false,
                        ["encrypt"]
                    );
                    const encodedData = await window.crypto.subtle.encrypt(
                        { name: "AES-GCM", iv: new Uint8Array(12) },
                        encodedKey,
                        dataUint8
                    );
                    const base64Encoded = btoa(
                        String.fromCharCode(...new Uint8Array(encodedData))
                    );
                    this.encodedString = base64Encoded;
                },
            },
        })
    </script>
    <style scoped>
        #app {
            background-color: #f0f0f0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

#app p {
            margin: 0;
            padding: 10px 0;
            font-size: 16px;
            font-weight: bold;
        }

#app p:first-child {
            color: blue;
        }

#app p:last-child {
            color: green;
        }
    </style>
</body>

</html>