how to force rendering in svelte 3?

I believe I've found an elegant solution to the problem of forcing a component to update when its data has been changed outside of it's scope.

main.js; vanilla from the examples online, no special changes:

import App from './App.svelte';

var app = new App({
    target: document.body
});

export default app;

index.html; Note window.neek = {...}:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Svelte app</title>
    <script>
        window.neek = { nick: true, camp: { bell: "Neek" }, counter: 0 };
    </script>
    <script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>

App.svelte; Note $: notneek = window.neek and window.neek.update = ...:

<script>
    let name = 'world';
    $: notneek = window.neek;

    function handleClick() {
        notneek.counter += 1;
    }

    window.neek.update = function () {
        notneek = notneek;
    }
</script>

<h1>Hello { notneek.camp.bell }!</h1>

<button on:click={handleClick}>
    Clicked {notneek.counter} {notneek.counter === 1 ? 'time' : 'times'}
</button>

Since the update function is within the scope of App.svelte, it is able to force the re-render when called via window.neek.update(). This setup uses window.neek.counter for the internal data utilized by the button (via notneek.counter) and allows for the deep properties (e.g. neek.camp.bell = "ish") to be updated outside of the component and reflected once neek.update() is called.

In the console, type window.neek.camp.bell = "Bill" and note that Hello Neek! has not been updated. Now, type window.neek.update() in the console and the UI will update to Hello Bill!.

Best of all, you can be as granular as you want within the update function so that only the pieces you want to be synchronized will be.

I don't understand everything in the example you give, but the general answer to your question is that, in Svelte, you should try to avoid situations where you'd need to trigger an update yourself.

In most cases, it is possible to make your component more declarative and better leverages reactivity (reactive statements in particular) for Svelte to render just when it is needed.

However, for cases where it is not possible, as a workaround you can abuse the key of an {#each ...} block to force Svelte to recreate a component that would normally have been reused.

For example:

<script>
  export let allItems
  export let currentCategory

  $: items = allItems.filter(x => x.category === currentCategory)
</script>

{#each [items] as todos (currentCategory)}
  <Todos {todos} />
{/each}

See this other answer (from which I copied the above example) for more details.

See also this REPL that shows how to implement this hack into a reusable component, for cleaner syntax in the consumer.

And, for completeness, there's also this issue that has just appeared and asks for precisely this feature.