Vue Js Get Data(object) from Session Storage

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-if="isDataStored">
        <h3>Vue js Get item(Object) from Session Storage</h3>
        <table>
            <thead>
                <tr>
                    <th>River Name</th>
                    <th>Length (km)</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="river in rivers" :key="river.name">
                    <td>{{ river.name }}</td>
                    <td>{{ river.length }}</td>
                </tr>
            </tbody>
        </table>
    </div>

// Stringify and store the array in session storage
                sessionStorage.setItem('rivers', JSON.stringify(rivers));
                this.isDataStored = true;
            },
            computed: {
                rivers() {
                    // Get the array of river objects from session storage
                    const storedRivers = sessionStorage.getItem('rivers');

// Parse the array from storage
                    return JSON.parse(storedRivers);
                }
            }
        })
    </script>
    <style scoped>
        #app {
            margin: 0 auto;
            max-width: 800px;
            padding: 20px;
        }

/* style for the table */
        table {
            border-collapse: collapse;
            width: 100%;
        }

th,
        td {
            text-align: left;
            padding: 8px;
        }

th {
            background-color: #ddd;
        }

tr:nth-child(even) {
            background-color: #f2f2f2;
        }

/* style for the heading */
        h3 {
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 0;
        }
    </style>
</body>

</html>