Make DOM live update with SvelteKit and Supabase

I am using SvelteKit with Supabase. Whenever the form is submitted I would like to see the DOM live update. However, it takes a refresh to see the changes.How would I live update the DOM whenever a new row is inserted into the table?

<script>    import { supabase } from '$lib/supabaseClient'    const getData = async function() {        const { data, error } = await supabase        .from('scores')        .select('*')        return data    }    let newRowName = '';    let newRowScore = 0;    const postData = async function(nameVal, scoreVal) {        const { data, error } = await supabase        .from('scores')        .insert([{ name: nameVal, score: scoreVal }])    }</script>{#await getData()}<p>Waiting...</p>{:then data}    {#each data as singleData}<p>{singleData.name}: {singleData.score}</p>    {/each}{:catch error}<p>Error occured</p>{/await}<form on:submit|preventDefault="{() => postData(newRowName, newRowScore)}"><label for="name">Name:</label><input type="text" id='name' bind:value='{newRowName}' required /><label for="score">Score:</label><input type="number" id='score' bind:value='{newRowScore}' required /><button>Add row</button></form>