<button on:click='updatePromise()'>click me</button>
{#await promise}
<p>loading...</p>
{:then value}
<p>loaded</p> <!-- change this to `loaded {value}` and it works correctly -->
{:catch error}
<p>errored</p>
{/await}
<script>
export default {
data: () => ({
promise: new Promise(f => setTimeout(() => f(42), 1000))
}),
methods: {
updatePromise() {
this.set({
promise: new Promise(f => setTimeout(() => f(99), 1000))
});
}
}
};
</script>
REPL. When you click the button, a new block is created; the old one reverts to its pending state and stays in the DOM.