I am trying to update a variable on my page when it changes, but I am missing something on Svelte reactivity. Can someone please point out what is wrong?

REPL

App.svelte

<main>
    <h1>Detect data</h1>
    <p>Board number: {$room_data.board_number}</p>
</main>

<script>
    import {room_data} from './stream.js'
</script>

stream.js

import { writable } from 'svelte/store'

export var room_data = writable({
    board_number: -1,
});

setTimeout(function() {
    room_data.board_number = 7;
    console.log('to');
}, 2000);

>Solution :

You are setting a property of the writable (not its contents) here:

room_data.board_number = 7;

You probably want to do:

room_data.set({ board_number: 7 });